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

package/components/fileCard/index.spec.js

@@ -0,0 +1,1168 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact-vue-next';
+import { getElement, mount, unmount, wait } from '../../test/utils';
+import { FileCard, FileCardList } from '.';
+describe('FileCard', function () {
+  afterEach(function () {
+    unmount();
+  });
+  function expectViewerClosed() {
+    var viewer = document.querySelector('.k-media-viewer');
+    if (!viewer) {
+      expect(viewer).to.eql(null);
+      return;
+    }
+    expect(viewer.classList.contains('k-fade-leave-active') || viewer.classList.contains('k-fade-leave-to')).to.be.true;
+  }
+  // 文件卡片和显式媒体卡片走不同外形，媒体内部复用 Media。
+  it('should render file and media card types with Media inside', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var Demo, _mount, element;
+    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.FileCard = FileCard;
+              _this.FileCardList = FileCardList;
+              return _this;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard, FileCardList } = this;\n                <div>\n                    <FileCard name=\"spec.pdf\" type=\"file\" byte={1024} src=\"https://example.com/spec.pdf\" />\n                    <FileCard name=\"cover.png\" type=\"image\" src=\"https://example.com/cover.png\" />\n                    <FileCardList items={[\n                        {key: 'video', name: 'demo.mp4', type: 'video', src: 'https://example.com/demo.mp4'},\n                        {key: 'audio', name: 'voice.mp3', type: 'audio', src: 'https://example.com/voice.mp3'},\n                    ]} />\n                </div>\n            ";
+          _mount = mount(Demo), element = _mount[1];
+          expect(element.querySelectorAll('.k-file-card').length).to.eql(4);
+          expect(element.querySelector('.k-file-card-file')).not.to.eql(null);
+          expect(element.querySelectorAll('.k-file-card-media').length).to.eql(3);
+          expect(element.querySelector('.k-file-card-type-image .k-media-image')).not.to.eql(null);
+          expect(element.querySelector('.k-file-card-type-video .k-media-video')).not.to.eql(null);
+          expect(element.querySelector('.k-file-card-type-audio .k-media-audio')).not.to.eql(null);
+        case 9:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee);
+  })));
+  // 显式媒体卡片可开启名称 Tooltip，文件行左侧媒体缩略图固定关闭。
+  it('should pass name tooltip setting to media cards only', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var Demo, _mount2, element, imageMedia, videoMedia, audioMedia, listMedia, listMediaViews, listFileRowMedia, defaultMedia, fileRowMedia;
+    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.FileCard = FileCard;
+              _this2.FileCardList = FileCardList;
+              return _this2;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard, FileCardList } = this;\n                <div>\n                    <FileCard className=\"image-tooltip\" name=\"cover.png\" type=\"image\" src=\"https://example.com/cover.png\" showNameTooltip />\n                    <FileCard className=\"video-tooltip\" name=\"demo.mp4\" type=\"video\" src=\"https://example.com/demo.mp4\" showNameTooltip />\n                    <FileCard className=\"audio-tooltip\" name=\"voice.mp3\" type=\"audio\" src=\"https://example.com/voice.mp3\" showNameTooltip />\n                    <FileCard className=\"default-media-tooltip\" name=\"default.png\" type=\"image\" src=\"https://example.com/default.png\" />\n                    <FileCard className=\"file-row-tooltip\" name=\"row.png\" type=\"file\" src=\"https://example.com/row.png\" showNameTooltip />\n                    <FileCardList className=\"list-tooltip\" showNameTooltip items={[\n                        {key: 'audio', name: 'list.mp3', type: 'audio', src: 'https://example.com/list.mp3'},\n                        {key: 'image', name: 'list.png', type: 'image', src: 'https://example.com/list.png'},\n                        {key: 'video-off', name: 'off.mp4', type: 'video', src: 'https://example.com/off.mp4', showNameTooltip: false},\n                        {key: 'file-row', name: 'row-list.png', type: 'file', src: 'https://example.com/row-list.png'},\n                    ]} />\n                </div>\n            ";
+          _mount2 = mount(Demo), element = _mount2[1];
+          imageMedia = element.querySelector('.image-tooltip .k-file-card-media-view');
+          videoMedia = element.querySelector('.video-tooltip .k-file-card-media-view');
+          audioMedia = element.querySelector('.audio-tooltip .k-file-card-media-view');
+          listMedia = element.querySelector('.list-tooltip .k-file-card-media-view');
+          listMediaViews = element.querySelectorAll('.list-tooltip .k-file-card-media-view');
+          listFileRowMedia = element.querySelector('.list-tooltip .k-file-card-file-media-view');
+          defaultMedia = element.querySelector('.default-media-tooltip .k-file-card-media-view');
+          fileRowMedia = element.querySelector('.file-row-tooltip .k-file-card-file-media-view');
+          [imageMedia, videoMedia, audioMedia, listMedia, listMediaViews[1]].forEach(function (media) {
+            expect(media.querySelector('.k-media-name-tooltip-trigger')).not.to.eql(null);
+            expect(media.getAttribute('title')).to.eql(null);
+          });
+          expect(listMediaViews[2].querySelector('.k-media-name-tooltip-trigger')).to.eql(null);
+          expect(listMediaViews[2].getAttribute('title')).to.eql('off.mp4');
+          expect(listFileRowMedia.querySelector('.k-media-name-tooltip-trigger')).to.eql(null);
+          expect(listFileRowMedia.getAttribute('title')).to.eql('row-list.png');
+          expect(defaultMedia.querySelector('.k-media-name-tooltip-trigger')).to.eql(null);
+          expect(defaultMedia.getAttribute('title')).to.eql('default.png');
+          expect(fileRowMedia.querySelector('.k-media-name-tooltip-trigger')).to.eql(null);
+          expect(fileRowMedia.getAttribute('title')).to.eql('row.png');
+        case 20:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee2);
+  })));
+  // 普通文件按扩展名使用内置设计图标。
+  it('should render builtin file icons by extension', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var Demo, _mount3, element, word, sheet, txt, pdf, md, code, ppt, zip, fallback, imageNoSrc, videoNoPreview, audioNoPreview;
+    return _regeneratorRuntime.wrap(function _callee3$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          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.FileCard = FileCard;
+              return _this3;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard className=\"word\" name=\"a.docx\" type=\"file\" />\n                    <FileCard className=\"sheet\" name=\"b.csv\" type=\"file\" />\n                    <FileCard className=\"txt\" name=\"c.txt\" type=\"file\" />\n                    <FileCard className=\"pdf\" name=\"d.pdf\" type=\"file\" />\n                    <FileCard className=\"md\" name=\"e.md\" type=\"file\" />\n                    <FileCard className=\"code\" name=\"f.ts\" type=\"file\" />\n                    <FileCard className=\"ppt\" name=\"g.pptx\" type=\"file\" />\n                    <FileCard className=\"zip\" name=\"h.zip\" type=\"file\" />\n                    <FileCard className=\"fallback\" name=\"i.unknown\" type=\"file\" />\n                    <FileCard className=\"image-no-src\" name=\"k.png\" type=\"file\" />\n                    <FileCard className=\"video-no-preview\" name=\"l.mp4\" type=\"file\" showPreview={false} src=\"https://example.com/l.mp4\" />\n                    <FileCard className=\"audio-no-preview\" name=\"m.mp3\" type=\"file\" showPreview={false} src=\"https://example.com/m.mp3\" />\n                </div>\n            ";
+          _mount3 = mount(Demo), element = _mount3[1];
+          word = element.querySelector('.word .k-file-card-file-icon-img').src;
+          sheet = element.querySelector('.sheet .k-file-card-file-icon-img').src;
+          txt = element.querySelector('.txt .k-file-card-file-icon-img').src;
+          pdf = element.querySelector('.pdf .k-file-card-file-icon-img').src;
+          md = element.querySelector('.md .k-file-card-file-icon-img').src;
+          code = element.querySelector('.code .k-file-card-file-icon-img').src;
+          ppt = element.querySelector('.ppt .k-file-card-file-icon-img').src;
+          zip = element.querySelector('.zip .k-file-card-file-icon-img').src;
+          fallback = element.querySelector('.fallback .k-file-card-file-icon-img').src;
+          imageNoSrc = element.querySelector('.image-no-src .k-file-card-file-icon-img').src;
+          videoNoPreview = element.querySelector('.video-no-preview .k-file-card-file-icon-img').src;
+          audioNoPreview = element.querySelector('.audio-no-preview .k-file-card-file-icon-img').src;
+          [word, sheet, txt, pdf, md, code, ppt, zip, fallback, imageNoSrc, videoNoPreview, audioNoPreview].forEach(function (src) {
+            expect(src).to.contain('data:image/svg+xml');
+          });
+          expect(word).not.to.eql(pdf);
+          expect(sheet).not.to.eql(zip);
+          expect(md).not.to.eql(code);
+          expect(imageNoSrc).not.to.eql(videoNoPreview);
+          expect(videoNoPreview).not.to.eql(audioNoPreview);
+          expect(element.querySelector('.video-no-preview .k-file-card-file-media-view')).to.eql(null);
+          expect(element.querySelector('.audio-no-preview .k-file-card-file-media-view')).to.eql(null);
+        case 23:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee3);
+  })));
+  // type=file 始终保持文件行外形，但媒体资源会用左侧小 Media 缩略图。
+  it('should keep file layout and render media thumbnail for explicit file type', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _element$querySelecto, _element$querySelecto2;
+    var Demo, _mount4, element, card, media;
+    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.FileCard = FileCard;
+              return _this4;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"\u5C01\u9762\u56FE.png\"\n                        type=\"file\"\n                        status=\"loading\"\n                        percent={30}\n                        src=\"https://example.com/cover.png\"\n                    />\n                </div>\n            ";
+          _mount4 = mount(Demo), element = _mount4[1];
+          card = element.querySelector('.k-file-card');
+          media = element.querySelector('.k-file-card-file-media-view');
+          expect(card.className).to.contain('k-file-card-file');
+          expect(card.className).not.to.contain('k-file-card-media');
+          expect(media).not.to.eql(null);
+          expect(media.className).to.contain('k-media-loading');
+          expect(media.className).not.to.contain('k-media-custom-loading');
+          expect(element.querySelector('.k-file-card-file-shell').style.getPropertyValue('--file-card-progress-percent')).to.eql('30%');
+          expect((_element$querySelecto = element.querySelector('.k-file-card-description')) == null ? void 0 : _element$querySelecto.textContent).to.contain('上传中... 30%');
+          expect((_element$querySelecto2 = element.querySelector('.k-file-card-description')) == null ? void 0 : _element$querySelecto2.textContent).not.to.contain('KB');
+        case 13:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee4);
+  })));
+  // 显式视频卡片 loading 时，进度展示在 loading 圈右侧，文案居中展示。
+  it('should pass status to media card and show video progress beside spinner', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var _element$querySelecto3, _element$querySelecto4;
+    var Demo, _mount5, element, card, media;
+    return _regeneratorRuntime.wrap(function _callee5$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
+        case 0:
+          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.FileCard = FileCard;
+              return _this5;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"result.mp4\"\n                        type=\"video\"\n                        status=\"loading\"\n                        percent={56}\n                        loadingText=\"\u5904\u7406\u4E2D\"\n                        src=\"https://example.com/result.mp4\"\n                    />\n                </div>\n            ";
+          _mount5 = mount(Demo), element = _mount5[1];
+          card = element.querySelector('.k-file-card');
+          media = element.querySelector('.k-file-card-media-view');
+          expect(card.className).to.contain('k-file-card-media');
+          expect(card.className).to.contain('k-file-card-progressing');
+          expect(media.className).to.contain('k-media-loading');
+          expect(element.querySelector('.k-media-loading-indicator')).not.to.eql(null);
+          expect((_element$querySelecto3 = element.querySelector('.k-file-card-media-loading-text')) == null ? void 0 : _element$querySelecto3.textContent).to.contain('处理中');
+          expect((_element$querySelecto4 = element.querySelector('.k-file-card-media-progress-text')) == null ? void 0 : _element$querySelecto4.textContent).to.contain('56%');
+        case 11:
+        case "end":
+          return _context10.stop();
+      }
+    }, _callee5);
+  })));
+  // 显式图片卡片 loading 且有 percent 时，同样展示进度文案。
+  it('should show image progress beside spinner when loading', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _element$querySelecto5;
+    var Demo, _mount6, element;
+    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.FileCard = FileCard;
+              return _this6;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"cover.png\"\n                        type=\"image\"\n                        status=\"loading\"\n                        percent={43}\n                        src=\"https://example.com/cover.png\"\n                    />\n                </div>\n            ";
+          _mount6 = mount(Demo), element = _mount6[1];
+          expect(element.querySelector('.k-media-loading-indicator')).not.to.eql(null);
+          expect((_element$querySelecto5 = element.querySelector('.k-file-card-media-progress-text')) == null ? void 0 : _element$querySelecto5.textContent).to.contain('43%');
+        case 5:
+        case "end":
+          return _context12.stop();
+      }
+    }, _callee6);
+  })));
+  // 显式媒体卡片外层不额外定义尺寸，宽高完全跟随内部 Media。
+  it('should let media card size follow inner Media', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var Demo, _mount7, element, card, media;
+    return _regeneratorRuntime.wrap(function _callee7$(_context14) {
+      while (1) switch (_context14.prev = _context14.next) {
+        case 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.FileCard = FileCard;
+              return _this7;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard name=\"cover.png\" type=\"image\" size=\"small\" src=\"https://example.com/cover.png\" />\n                </div>\n            ";
+          _mount7 = mount(Demo), element = _mount7[1];
+          card = element.querySelector('.k-file-card');
+          media = element.querySelector('.k-media');
+          expect(getComputedStyle(card).width).to.eql(getComputedStyle(media).width);
+          expect(getComputedStyle(card).height).to.eql(getComputedStyle(media).height);
+        case 7:
+        case "end":
+          return _context14.stop();
+      }
+    }, _callee7);
+  })));
+  // 普通文件卡片默认宽度为 160px。
+  it('should render default file card width as 160px', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var Demo, _mount8, element, card;
+    return _regeneratorRuntime.wrap(function _callee8$(_context16) {
+      while (1) switch (_context16.prev = _context16.next) {
+        case 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.FileCard = FileCard;
+              return _this8;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard name=\"a.pdf\" type=\"file\" />\n                </div>\n            ";
+          _mount8 = mount(Demo), element = _mount8[1];
+          card = element.querySelector('.k-file-card');
+          expect(getComputedStyle(card).width).to.eql('160px');
+        case 5:
+        case "end":
+          return _context16.stop();
+      }
+    }, _callee8);
+  })));
+  // 显式媒体 loading 文案仅在指定 loadingText 时展示。
+  it('should show media loading text only when loadingText is specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var _element$querySelecto6;
+    var Demo, _mount9, element;
+    return _regeneratorRuntime.wrap(function _callee9$(_context18) {
+      while (1) switch (_context18.prev = _context18.next) {
+        case 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.FileCard = FileCard;
+              return _this9;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard name=\"a.png\" type=\"image\" status=\"loading\" src=\"https://example.com/a.png\" />\n                    <FileCard name=\"b.png\" type=\"image\" status=\"loading\" loadingText=\"\u5904\u7406\u4E2D\" src=\"https://example.com/b.png\" />\n                    <FileCard name=\"a.mp4\" type=\"video\" status=\"loading\" loadingText=\"\" src=\"https://example.com/a.mp4\" />\n                </div>\n            ";
+          _mount9 = mount(Demo), element = _mount9[1];
+          expect(element.querySelectorAll('.k-media-loading-indicator').length).to.eql(3);
+          expect(element.querySelectorAll('.k-file-card-media-loading-text').length).to.eql(1);
+          expect((_element$querySelecto6 = element.querySelector('.k-file-card-media-loading-text')) == null ? void 0 : _element$querySelecto6.textContent).to.contain('处理中');
+        case 6:
+        case "end":
+          return _context18.stop();
+      }
+    }, _callee9);
+  })));
+  // mini 文件卡片默认只展示图标和文件名，不展示描述区。
+  it('should hide description in mini file card', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var _element$querySelecto7;
+    var Demo, _mount10, element, card;
+    return _regeneratorRuntime.wrap(function _callee10$(_context20) {
+      while (1) switch (_context20.prev = _context20.next) {
+        case 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.FileCard = FileCard;
+              return _this10;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard name=\"voice.mp3\" type=\"file\" size=\"mini\" byte={1024} />\n                </div>\n            ";
+          _mount10 = mount(Demo), element = _mount10[1];
+          card = element.querySelector('.k-file-card');
+          expect(card.className).to.contain('k-file-card-mini');
+          expect((_element$querySelecto7 = element.querySelector('.k-file-card-title')) == null ? void 0 : _element$querySelecto7.textContent).to.contain('voice.mp3');
+          expect(element.querySelector('.k-file-card-description')).to.eql(null);
+        case 7:
+        case "end":
+          return _context20.stop();
+      }
+    }, _callee10);
+  })));
+  // mini 文件卡片在 loading/error 时，状态文案占据标题位置。
+  it('should show loading and error status text in mini file title area', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var _cards$0$querySelecto, _cards$0$querySelecto2, _cards$1$querySelecto, _cards$1$querySelecto2;
+    var Demo, _mount11, element, cards;
+    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.FileCard = FileCard;
+              return _this11;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard name=\"uploading.pdf\" type=\"file\" size=\"mini\" status=\"loading\" percent={80} />\n                    <FileCard name=\"error.pdf\" type=\"file\" size=\"mini\" status=\"error\" />\n                </div>\n            ";
+          _mount11 = mount(Demo), element = _mount11[1];
+          cards = element.querySelectorAll('.k-file-card');
+          expect((_cards$0$querySelecto = cards[0].querySelector('.k-file-card-title')) == null ? void 0 : _cards$0$querySelecto.textContent).to.contain('上传中... 80%');
+          expect((_cards$0$querySelecto2 = cards[0].querySelector('.k-file-card-title')) == null ? void 0 : _cards$0$querySelecto2.textContent).not.to.contain('uploading.pdf');
+          expect((_cards$1$querySelecto = cards[1].querySelector('.k-file-card-title')) == null ? void 0 : _cards$1$querySelecto.textContent).to.contain('上传失败');
+          expect((_cards$1$querySelecto2 = cards[1].querySelector('.k-file-card-title')) == null ? void 0 : _cards$1$querySelecto2.textContent).not.to.contain('error.pdf');
+          expect(cards[1].querySelector('.k-file-card-title-status-error')).not.to.eql(null);
+        case 9:
+        case "end":
+          return _context22.stop();
+      }
+    }, _callee11);
+  })));
+  // type=file 的背景进度使用整张卡片底色，不再渲染 Progress 组件。
+  it('should render file progress as card background instead of Progress component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+    var _element$querySelecto8, _element$querySelecto9;
+    var Demo, _mount12, element, card;
+    return _regeneratorRuntime.wrap(function _callee12$(_context24) {
+      while (1) switch (_context24.prev = _context24.next) {
+        case 0:
+          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.FileCard = FileCard;
+              return _this12;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard name=\"assets.zip\" type=\"file\" status=\"loading\" percent={62} byte={1024 * 20} />\n                </div>\n            ";
+          _mount12 = mount(Demo), element = _mount12[1];
+          card = element.querySelector('.k-file-card');
+          expect(element.querySelector('.k-file-card-file-shell').style.getPropertyValue('--file-card-progress-percent')).to.eql('62%');
+          expect(element.querySelector('.k-progress')).to.eql(null);
+          expect((_element$querySelecto8 = element.querySelector('.k-file-card-description')) == null ? void 0 : _element$querySelecto8.textContent).to.contain('上传中... 62%');
+          expect((_element$querySelecto9 = element.querySelector('.k-file-card-description')) == null ? void 0 : _element$querySelecto9.textContent).not.to.contain('KB');
+        case 8:
+        case "end":
+          return _context24.stop();
+      }
+    }, _callee12);
+  })));
+  // errorText 在文件错误状态下优先于 description 和 byte。
+  it('should prioritize errorText over description and byte when status is error', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+    var _element$querySelecto10;
+    var Demo, _mount13, element, text;
+    return _regeneratorRuntime.wrap(function _callee13$(_context26) {
+      while (1) switch (_context26.prev = _context26.next) {
+        case 0:
+          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.FileCard = FileCard;
+              return _this13;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"broken.pdf\"\n                        type=\"file\"\n                        status=\"error\"\n                        description=\"\u666E\u901A\u63CF\u8FF0\"\n                        errorText=\"\u4E0A\u4F20\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5\"\n                        byte={1024 * 20}\n                    />\n                </div>\n            ";
+          _mount13 = mount(Demo), element = _mount13[1];
+          text = ((_element$querySelecto10 = element.querySelector('.k-file-card-description')) == null ? void 0 : _element$querySelecto10.textContent) || '';
+          expect(text).to.contain('上传失败，请重试');
+          expect(text).not.to.contain('普通描述');
+          expect(text).not.to.contain('20 KB');
+        case 7:
+        case "end":
+          return _context26.stop();
+      }
+    }, _callee13);
+  })));
+  // 显式图片/视频上传失败时，有 src 也展示错误占位，错误文案仅在指定 errorText 时展示。
+  it('should render media error state with source and show text only when specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+    var _cards$1$querySelecto3;
+    var Demo, _mount14, element, cards, artwork, icon;
+    return _regeneratorRuntime.wrap(function _callee14$(_context28) {
+      while (1) switch (_context28.prev = _context28.next) {
+        case 0:
+          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.FileCard = FileCard;
+              return _this14;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"cover.png\"\n                        type=\"image\"\n                        src=\"https://example.com/cover.png\"\n                        status=\"error\"\n                    />\n                    <FileCard\n                        name=\"clip.mp4\"\n                        type=\"video\"\n                        src=\"https://example.com/clip.mp4\"\n                        status=\"error\"\n                        errorText=\"\u4E0A\u4F20\u5931\u8D25\"\n                    />\n                </div>\n            ";
+          _mount14 = mount(Demo), element = _mount14[1];
+          cards = element.querySelectorAll('.k-file-card');
+          artwork = cards[1].querySelector('.k-file-card-media-error-artwork-content');
+          icon = artwork.querySelector('.k-file-card-media-error-artwork-icon');
+          expect(cards[0].className).to.contain('k-file-card-error');
+          expect(cards[0].querySelector('img.k-media-image')).to.eql(null);
+          expect(cards[1].querySelector('video.k-media-video')).to.eql(null);
+          expect(cards[0].querySelector('.k-media-error-card')).not.to.eql(null);
+          expect(cards[1].querySelector('.k-media-error-card')).to.eql(null);
+          expect(cards[0].querySelector('.k-file-card-error-text')).to.eql(null);
+          expect((_cards$1$querySelecto3 = cards[1].querySelector('.k-file-card-error-text')) == null ? void 0 : _cards$1$querySelecto3.textContent).to.contain('上传失败');
+          expect(cards[1].className).to.contain('k-file-card-media-error-artwork');
+          expect(icon.src).to.contain('ECECEC');
+          expect(getComputedStyle(cards[0]).borderColor).not.to.eql('rgb(237, 64, 64)');
+          expect(element.querySelector('.k-media-placeholder')).to.eql(null);
+          expect(element.querySelector('.k-media-preview-trigger')).to.eql(null);
+        case 18:
+        case "end":
+          return _context28.stop();
+      }
+    }, _callee14);
+  })));
+  // 显式图片上传失败时，不再等待 src 加载失败，直接展示上传失败 artwork。
+  it('should render upload error artwork immediately for visual media with source', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+    var _artwork$querySelecto;
+    var Demo, _mount15, element, artwork;
+    return _regeneratorRuntime.wrap(function _callee15$(_context30) {
+      while (1) switch (_context30.prev = _context30.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component15) {
+            _inheritsLoose(Demo, _Component15);
+            function Demo() {
+              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(_context29 = [this]).call(_context29, args)) || this;
+              _this15.FileCard = FileCard;
+              return _this15;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"cover.png\"\n                        type=\"image\"\n                        src=\"https://example.com/cover.png\"\n                        status=\"error\"\n                        errorText=\"\u4E0A\u4F20\u5931\u8D25\"\n                    />\n                </div>\n            ";
+          _mount15 = mount(Demo), element = _mount15[1];
+          artwork = element.querySelector('.k-file-card-media-error-artwork-content');
+          expect(artwork).not.to.eql(null);
+          expect(element.querySelector('img.k-media-image')).to.eql(null);
+          expect(element.querySelector('.k-file-card-media-status-layer')).to.eql(null);
+          expect((_artwork$querySelecto = artwork.querySelector('.k-file-card-error-text')) == null ? void 0 : _artwork$querySelecto.textContent).to.contain('上传失败');
+        case 8:
+        case "end":
+          return _context30.stop();
+      }
+    }, _callee15);
+  })));
+  // 无 src 的显式媒体错误态使用灰色图标，错误文案仅在指定 errorText 时展示。
+  it('should render gray media error icon and show text only when errorText is specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
+    var Demo, _mount16, element, cards, shell, artwork, text, icon, style, artworkStyle;
+    return _regeneratorRuntime.wrap(function _callee16$(_context32) {
+      while (1) switch (_context32.prev = _context32.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component16) {
+            _inheritsLoose(Demo, _Component16);
+            function Demo() {
+              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(_context31 = [this]).call(_context31, args)) || this;
+              _this16.FileCard = FileCard;
+              return _this16;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"cover.png\"\n                        type=\"image\"\n                        status=\"error\"\n                        errorText=\"\u4E0A\u4F20\u5931\u8D25\"\n                    />\n                    <FileCard\n                        name=\"clip.mp4\"\n                        type=\"video\"\n                        status=\"error\"\n                    />\n                </div>\n            ";
+          _mount16 = mount(Demo), element = _mount16[1];
+          cards = element.querySelectorAll('.k-file-card');
+          shell = cards[0].querySelector('.k-file-card-media-view .k-media-shell');
+          artwork = cards[0].querySelector('.k-file-card-media-error-artwork-content');
+          text = artwork.querySelector('.k-file-card-error-text');
+          icon = artwork.querySelector('.k-file-card-media-error-artwork-icon');
+          style = getComputedStyle(shell);
+          artworkStyle = getComputedStyle(artwork);
+          expect(style.boxShadow).to.eql('none');
+          expect(getComputedStyle(cards[0]).borderColor).not.to.eql('rgb(237, 64, 64)');
+          expect(style.borderTopColor).not.to.eql('rgb(237, 64, 64)');
+          expect(artwork).not.to.eql(null);
+          expect(icon.src).to.contain('ECECEC');
+          expect(text == null ? void 0 : text.textContent).to.contain('上传失败');
+          expect(artworkStyle.display).to.eql('flex');
+          expect(artworkStyle.flexDirection).to.eql('column');
+          expect(artworkStyle.alignItems).to.eql('center');
+          expect(artworkStyle.justifyContent).to.eql('center');
+          expect(artworkStyle.gap).to.eql('4px');
+          expect(getComputedStyle(icon).width).to.eql('32px');
+          expect(getComputedStyle(icon).height).to.eql('32px');
+          expect(getComputedStyle(text).color).to.eql('rgb(255, 68, 51)');
+          expect(cards[0].className).to.contain('k-file-card-media-error-artwork');
+          expect(cards[1].querySelector('.k-file-card-error-text')).to.eql(null);
+          expect(cards[1].querySelector('.k-file-card-media-error-artwork-content')).to.eql(null);
+          expect(cards[1].querySelector('.k-media-error-card')).not.to.eql(null);
+        case 28:
+        case "end":
+          return _context32.stop();
+      }
+    }, _callee16);
+  })));
+  // 显式视频在 mini 尺寸下，percent 仍会展示进度文本。
+  it('should show video progress text in mini size when percent is provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
+    var _element$querySelecto11;
+    var Demo, _mount17, element;
+    return _regeneratorRuntime.wrap(function _callee17$(_context34) {
+      while (1) switch (_context34.prev = _context34.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component17) {
+            _inheritsLoose(Demo, _Component17);
+            function Demo() {
+              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(_context33 = [this]).call(_context33, args)) || this;
+              _this17.FileCard = FileCard;
+              return _this17;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"result.mp4\"\n                        type=\"video\"\n                        size=\"mini\"\n                        status=\"loading\"\n                        percent={56}\n                        src=\"https://example.com/result.mp4\"\n                    />\n                </div>\n            ";
+          _mount17 = mount(Demo), element = _mount17[1];
+          expect((_element$querySelecto11 = element.querySelector('.k-file-card-media-progress-text')) == null ? void 0 : _element$querySelecto11.textContent).to.contain('56%');
+        case 4:
+        case "end":
+          return _context34.stop();
+      }
+    }, _callee17);
+  })));
+  // 文件行卡片 loading 时不展示 hover mask，避免和进度/状态层冲突。
+  it('should not render file mask slot when status is loading', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
+    var Demo, _mount18, element, mask;
+    return _regeneratorRuntime.wrap(function _callee18$(_context36) {
+      while (1) switch (_context36.prev = _context36.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component18) {
+            _inheritsLoose(Demo, _Component18);
+            function Demo() {
+              var _context35;
+              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(_context35 = [this]).call(_context35, args)) || this;
+              _this18.FileCard = FileCard;
+              return _this18;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"a.pdf\"\n                        type=\"file\"\n                        status=\"loading\"\n                    >\n                        <b:mask>\n                            <span class=\"mask-content\">\u64CD\u4F5C\u533A</span>\n                        </b:mask>\n                    </FileCard>\n                </div>\n            ";
+          _mount18 = mount(Demo), element = _mount18[1];
+          mask = element.querySelector('.k-file-card-file-mask');
+          expect(mask).to.eql(null);
+          expect(element.querySelector('.mask-content')).to.eql(null);
+        case 6:
+        case "end":
+          return _context36.stop();
+      }
+    }, _callee18);
+  })));
+  // 文件行的 description/mask 插槽为空时，不保留空描述行和空遮罩层。
+  it('should not render wrappers for empty file description and mask slots', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
+    var Demo, _mount19, element;
+    return _regeneratorRuntime.wrap(function _callee19$(_context38) {
+      while (1) switch (_context38.prev = _context38.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component19) {
+            _inheritsLoose(Demo, _Component19);
+            function Demo() {
+              var _context37;
+              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(_context37 = [this]).call(_context37, args)) || this;
+              _this19.FileCard = FileCard;
+              return _this19;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"a.pdf\"\n                        type=\"file\"\n                    >\n                        <b:description>\n                            <span v-if={false} class=\"empty-description\">\u63CF\u8FF0</span>\n                        </b:description>\n                        <b:mask>\n                            <span v-if={false} class=\"empty-mask\">\u64CD\u4F5C</span>\n                        </b:mask>\n                    </FileCard>\n                </div>\n            ";
+          _mount19 = mount(Demo), element = _mount19[1];
+          expect(element.querySelector('.k-file-card-description')).to.eql(null);
+          expect(element.querySelector('.k-file-card-file-mask')).to.eql(null);
+        case 5:
+        case "end":
+          return _context38.stop();
+      }
+    }, _callee19);
+  })));
+  // 显式媒体卡片会将 mask 扩展点透传给 Media，并由自定义按钮触发预览。
+  it('should forward mask slot to media card and open preview via mask action', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
+    var _getElement;
+    var Demo, _mount20, instance, element, button;
+    return _regeneratorRuntime.wrap(function _callee20$(_context40) {
+      while (1) switch (_context40.prev = _context40.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component20) {
+            _inheritsLoose(Demo, _Component20);
+            function Demo() {
+              var _context39;
+              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(_context39 = [this]).call(_context39, args)) || this;
+              _this20.FileCard = FileCard;
+              return _this20;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                previewCount: 0
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"cover.png\"\n                        type=\"image\"\n                        status=\"done\"\n                        src=\"https://example.com/cover.png\"\n                        ev-preview={() => this.set('previewCount', this.get('previewCount') + 1)}\n                    >\n                        <b:mask args=\"media\">\n                            <button\n                                class=\"media-mask-open\"\n                                type=\"button\"\n                                disabled={!media.canPreview}\n                                ev-click={media.preview}\n                            >open</button>\n                        </b:mask>\n                    </FileCard>\n                </div>\n            ";
+          _mount20 = mount(Demo), instance = _mount20[0], element = _mount20[1];
+          button = element.querySelector('.media-mask-open');
+          expect(button).not.to.eql(null);
+          expect(element.querySelector('.k-media-preview-trigger')).to.eql(null);
+          button.click();
+          _context40.next = 9;
+          return wait();
+        case 9:
+          expect(instance.get('previewCount')).to.eql(1);
+          expect(getElement('.k-media-viewer')).not.to.eql(null);
+          expect((_getElement = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement.textContent).to.contain('cover.png');
+        case 12:
+        case "end":
+          return _context40.stop();
+      }
+    }, _callee20);
+  })));
+  // 显式音频媒体仅在有 loading 文案或进度时展示 loading 蒙层，文案颜色与图片/视频一致。
+  it('should render audio loading overlay only when status text or progress is visible', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
+    var _textAudio$querySelec;
+    var Demo, _mount21, element, emptyAudio, textAudio, loadingText;
+    return _regeneratorRuntime.wrap(function _callee21$(_context42) {
+      while (1) switch (_context42.prev = _context42.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component21) {
+            _inheritsLoose(Demo, _Component21);
+            function Demo() {
+              var _context41;
+              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(_context41 = [this]).call(_context41, args)) || this;
+              _this21.FileCard = FileCard;
+              return _this21;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        className=\"audio-loading-empty\"\n                        name=\"plain.mp3\"\n                        type=\"audio\"\n                        status=\"loading\"\n                        src=\"https://example.com/plain.mp3\"\n                    />\n                    <FileCard\n                        className=\"audio-loading-text\"\n                        name=\"voice.mp3\"\n                        type=\"audio\"\n                        status=\"loading\"\n                        loadingText=\"\u4E0A\u4F20\u4E2D\"\n                        percent={37}\n                        src=\"https://example.com/voice.mp3\"\n                    />\n                </div>\n            ";
+          _mount21 = mount(Demo), element = _mount21[1];
+          emptyAudio = element.querySelector('.audio-loading-empty');
+          textAudio = element.querySelector('.audio-loading-text');
+          loadingText = textAudio.querySelector('.k-file-card-media-loading-text');
+          expect(emptyAudio.querySelector('.k-file-card-media-loading-overlay')).to.eql(null);
+          expect(textAudio.querySelector('.k-file-card-media-loading-overlay')).not.to.eql(null);
+          expect(textAudio.querySelector('.k-media-loading-overlay')).to.eql(null);
+          expect(textAudio.querySelector('.k-media-loading-indicator')).not.to.eql(null);
+          expect(loadingText.textContent).to.contain('上传中');
+          expect(getComputedStyle(loadingText).color).to.eql('rgb(255, 255, 255)');
+          expect((_textAudio$querySelec = textAudio.querySelector('.k-file-card-media-progress-text')) == null ? void 0 : _textAudio$querySelec.textContent).to.contain('37%');
+          expect(textAudio.querySelector('.k-media-preview-trigger')).to.eql(null);
+        case 14:
+        case "end":
+          return _context42.stop();
+      }
+    }, _callee21);
+  })));
+  // 小尺寸媒体卡片不展示居中的 loading 文案。
+  it('should hide loading text in compact image and video cards', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
+    var Demo, _mount22, element;
+    return _regeneratorRuntime.wrap(function _callee22$(_context44) {
+      while (1) switch (_context44.prev = _context44.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component22) {
+            _inheritsLoose(Demo, _Component22);
+            function Demo() {
+              var _context43;
+              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(_context43 = [this]).call(_context43, args)) || this;
+              _this22.FileCard = FileCard;
+              return _this22;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"cover.png\"\n                        type=\"image\"\n                        size=\"small\"\n                        status=\"loading\"\n                        src=\"https://example.com/cover.png\"\n                    />\n                    <FileCard\n                        name=\"clip.mp4\"\n                        type=\"video\"\n                        size=\"mini\"\n                        status=\"loading\"\n                        src=\"https://example.com/clip.mp4\"\n                    />\n                </div>\n            ";
+          _mount22 = mount(Demo), element = _mount22[1];
+          expect(element.querySelectorAll('.k-file-card-media-loading-text').length).to.eql(0);
+          expect(getElement('.k-tooltip-content')).to.not.exist;
+        case 5:
+        case "end":
+          return _context44.stop();
+      }
+    }, _callee22);
+  })));
+  // 音频 error 文案仅在指定 errorText 时展示，mini 尺寸不展示文案。
+  it('should render audio error artwork when errorText is specified and hide text in mini size', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
+    var _cards$0$querySelecto3;
+    var Demo, _mount23, element, cards, artwork, icon;
+    return _regeneratorRuntime.wrap(function _callee23$(_context46) {
+      while (1) switch (_context46.prev = _context46.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component23) {
+            _inheritsLoose(Demo, _Component23);
+            function Demo() {
+              var _context45;
+              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(_context45 = [this]).call(_context45, args)) || this;
+              _this23.FileCard = FileCard;
+              return _this23;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"voice.mp3\"\n                        type=\"audio\"\n                        status=\"error\"\n                        errorText=\"\u4E0A\u4F20\u5931\u8D25\"\n                        src=\"https://example.com/voice.mp3\"\n                    />\n                    <FileCard\n                        name=\"voice-mini.mp3\"\n                        type=\"audio\"\n                        size=\"mini\"\n                        status=\"error\"\n                        errorText=\"\u4E0A\u4F20\u5931\u8D25\"\n                        src=\"https://example.com/voice-mini.mp3\"\n                    />\n                </div>\n            ";
+          _mount23 = mount(Demo), element = _mount23[1];
+          cards = element.querySelectorAll('.k-file-card');
+          artwork = cards[0].querySelector('.k-file-card-media-error-artwork-content');
+          icon = artwork.querySelector('.k-file-card-media-error-artwork-icon');
+          expect((_cards$0$querySelecto3 = cards[0].querySelector('.k-file-card-error-text')) == null ? void 0 : _cards$0$querySelecto3.textContent).to.contain('上传失败');
+          expect(getComputedStyle(artwork).gap).to.eql('4px');
+          expect(cards[0].querySelector('.k-file-card-media-status-layer')).to.eql(null);
+          expect(cards[0].className).to.contain('k-file-card-media-error-artwork');
+          expect(icon.src).to.contain('ECECEC');
+          expect(cards[1].querySelector('.k-file-card-error-text')).to.eql(null);
+          expect(cards[1].querySelector('.k-file-card-media-error-artwork-content')).to.eql(null);
+        case 13:
+        case "end":
+          return _context46.stop();
+      }
+    }, _callee23);
+  })));
+  // 删除按钮位于右上角外侧，并阻止触发卡片点击。
+  it('should render corner delete button and trigger delete only', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
+    var calls, Demo, _mount24, element, button, style;
+    return _regeneratorRuntime.wrap(function _callee24$(_context48) {
+      while (1) switch (_context48.prev = _context48.next) {
+        case 0:
+          calls = [];
+          Demo = /*#__PURE__*/function (_Component24) {
+            _inheritsLoose(Demo, _Component24);
+            function Demo() {
+              var _context47;
+              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(_context47 = [this]).call(_context47, args)) || this;
+              _this24.FileCard = FileCard;
+              _this24.onClick = function () {
+                calls.push('click');
+              };
+              _this24.onDelete = function () {
+                calls.push('delete');
+              };
+              return _this24;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"spec.pdf\"\n                        showDelIcon\n                        ev-click={this.onClick}\n                        ev-delete={this.onDelete}\n                    />\n                </div>\n            ";
+          _mount24 = mount(Demo), element = _mount24[1];
+          button = element.querySelector('.k-file-card-delete');
+          style = getComputedStyle(button);
+          button.click();
+          _context48.next = 9;
+          return wait();
+        case 9:
+          expect(button.tagName).to.eql('DIV');
+          expect(button.className).not.to.contain('k-btn');
+          expect(style.top).to.eql('2px');
+          expect(style.right).to.eql('2px');
+          expect(style.zIndex).to.eql('5');
+          expect(style.transform).to.eql('none');
+          expect(calls).to.eql(['delete']);
+        case 16:
+        case "end":
+          return _context48.stop();
+      }
+    }, _callee24);
+  })));
+  // 视频卡片的播放触发器覆盖在卡片中间，删除按钮需要保持更高层级。
+  it('should keep video delete button above preview trigger and not open preview', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
+    var calls, Demo, _mount25, element, button, previewTrigger;
+    return _regeneratorRuntime.wrap(function _callee25$(_context50) {
+      while (1) switch (_context50.prev = _context50.next) {
+        case 0:
+          calls = [];
+          Demo = /*#__PURE__*/function (_Component25) {
+            _inheritsLoose(Demo, _Component25);
+            function Demo() {
+              var _context49;
+              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(_context49 = [this]).call(_context49, args)) || this;
+              _this25.FileCard = FileCard;
+              _this25.onClick = function () {
+                calls.push('click');
+              };
+              _this25.onPreview = function () {
+                calls.push('preview');
+              };
+              _this25.onDelete = function () {
+                calls.push('delete');
+              };
+              return _this25;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"clip.mp4\"\n                        type=\"video\"\n                        status=\"done\"\n                        src=\"https://example.com/clip.mp4\"\n                        showDelIcon\n                        ev-click={this.onClick}\n                        ev-preview={this.onPreview}\n                        ev-delete={this.onDelete}\n                    />\n                </div>\n            ";
+          _mount25 = mount(Demo), element = _mount25[1];
+          button = element.querySelector('.k-file-card-delete');
+          previewTrigger = element.querySelector('.k-media-video-preview-trigger');
+          expect(+getComputedStyle(button).zIndex).to.be.greaterThan(+getComputedStyle(previewTrigger).zIndex);
+          button.click();
+          _context50.next = 10;
+          return wait();
+        case 10:
+          expect(calls).to.eql(['delete']);
+          expectViewerClosed();
+        case 12:
+        case "end":
+          return _context50.stop();
+      }
+    }, _callee25);
+  })));
+  // 媒体预览由内部 Media 负责，同时 FileCard 继续抛出 preview 事件。
+  it('should preview media through Media viewer and trigger preview event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee26() {
+    var _getElement2;
+    var Demo, _mount26, instance, element, previewTrigger;
+    return _regeneratorRuntime.wrap(function _callee26$(_context52) {
+      while (1) switch (_context52.prev = _context52.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component26) {
+            _inheritsLoose(Demo, _Component26);
+            function Demo() {
+              var _context51;
+              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(_context51 = [this]).call(_context51, args)) || this;
+              _this26.FileCard = FileCard;
+              return _this26;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                previewCount: 0
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"cover.png\"\n                        type=\"image\"\n                        status=\"done\"\n                        src=\"https://example.com/cover.png\"\n                        ev-preview={() => this.set('previewCount', this.get('previewCount') + 1)}\n                    />\n                </div>\n            ";
+          _mount26 = mount(Demo), instance = _mount26[0], element = _mount26[1];
+          previewTrigger = element.querySelector('.k-media-preview-trigger');
+          previewTrigger.click();
+          _context52.next = 7;
+          return wait();
+        case 7:
+          expect(instance.get('previewCount')).to.eql(1);
+          expect(getElement('.k-media-viewer')).not.to.eql(null);
+          expect((_getElement2 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement2.textContent).to.contain('cover.png');
+        case 10:
+        case "end":
+          return _context52.stop();
+      }
+    }, _callee26);
+  })));
+  // showPreview=false 会同步关闭显式媒体和文件行媒体缩略图的预览入口。
+  it('should disable preview for media and file media thumbnail', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee27() {
+    var Demo, _mount27, element;
+    return _regeneratorRuntime.wrap(function _callee27$(_context54) {
+      while (1) switch (_context54.prev = _context54.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component27) {
+            _inheritsLoose(Demo, _Component27);
+            function Demo() {
+              var _context53;
+              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(_context53 = [this]).call(_context53, args)) || this;
+              _this27.FileCard = FileCard;
+              return _this27;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard name=\"cover.png\" type=\"image\" status=\"done\" showPreview={false} src=\"https://example.com/cover.png\" />\n                    <FileCard name=\"clip.mp4\" type=\"file\" showPreview={false} src=\"https://example.com/clip.mp4\" />\n                </div>\n            ";
+          _mount27 = mount(Demo), element = _mount27[1];
+          expect(element.querySelector('.k-media-preview-trigger')).to.eql(null);
+        case 4:
+        case "end":
+          return _context54.stop();
+      }
+    }, _callee27);
+  })));
+  // FileCardList 继承默认尺寸、删除开关，并透传新增的 loadingText。
+  it('should proxy FileCardList props and events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee28() {
+    var _element$querySelecto12;
+    var calls, Demo, _mount28, element, card, button;
+    return _regeneratorRuntime.wrap(function _callee28$(_context56) {
+      while (1) switch (_context56.prev = _context56.next) {
+        case 0:
+          calls = [];
+          Demo = /*#__PURE__*/function (_Component28) {
+            _inheritsLoose(Demo, _Component28);
+            function Demo() {
+              var _context55;
+              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(_context55 = [this]).call(_context55, args)) || this;
+              _this28.FileCardList = FileCardList;
+              _this28.onDelete = function (item) {
+                calls.push(item.key);
+              };
+              return _this28;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCardList } = this;\n                <FileCardList\n                    size=\"small\"\n                    deleteable\n                    items={[\n                        {key: 'a', name: 'a.pdf', status: 'loading', percent: 10, loadingText: '\u4E0A\u4F20\u4E2D'},\n                    ]}\n                    ev-delete={this.onDelete}\n                />\n            ";
+          _mount28 = mount(Demo), element = _mount28[1];
+          card = element.querySelector('.k-file-card');
+          button = element.querySelector('.k-file-card-delete');
+          expect(card.className).to.contain('k-file-card-small');
+          expect((_element$querySelecto12 = element.querySelector('.k-file-card-description')) == null ? void 0 : _element$querySelecto12.textContent).to.contain('上传中... 10%');
+          button.click();
+          _context56.next = 11;
+          return wait();
+        case 11:
+          expect(calls).to.eql(['a']);
+        case 12:
+        case "end":
+          return _context56.stop();
+      }
+    }, _callee28);
+  })));
+  // FileCardList 的 prefix/suffix 插槽为空时，不保留额外 flex item。
+  it('should not render prefix or suffix wrapper when slots are empty', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee29() {
+    var Demo, _mount29, element;
+    return _regeneratorRuntime.wrap(function _callee29$(_context58) {
+      while (1) switch (_context58.prev = _context58.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component29) {
+            _inheritsLoose(Demo, _Component29);
+            function Demo() {
+              var _context57;
+              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(_context57 = [this]).call(_context57, args)) || this;
+              _this29.FileCardList = FileCardList;
+              return _this29;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCardList } = this;\n                <FileCardList\n                    items={[{key: 'a', name: 'a.pdf'}]}\n                >\n                    <b:prefix>\n                        <button v-if={false} class=\"empty-prefix\" type=\"button\">add</button>\n                    </b:prefix>\n                    <b:suffix>\n                        <button v-if={false} class=\"empty-suffix\" type=\"button\">more</button>\n                    </b:suffix>\n                </FileCardList>\n            ";
+          _mount29 = mount(Demo), element = _mount29[1];
+          expect(element.querySelector('.k-file-card-list-prefix')).to.eql(null);
+          expect(element.querySelector('.k-file-card-list-suffix')).to.eql(null);
+        case 5:
+        case "end":
+          return _context58.stop();
+      }
+    }, _callee29);
+  })));
+  it('should render prefix before items and suffix after items', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee30() {
+    var Demo, _mount30, element, list;
+    return _regeneratorRuntime.wrap(function _callee30$(_context60) {
+      while (1) switch (_context60.prev = _context60.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component30) {
+            _inheritsLoose(Demo, _Component30);
+            function Demo() {
+              var _context59;
+              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(_context59 = [this]).call(_context59, args)) || this;
+              _this30.FileCardList = FileCardList;
+              return _this30;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCardList } = this;\n                <FileCardList\n                    items={[{key: 'a', name: 'a.pdf'}]}\n                >\n                    <b:prefix>\n                        <button class=\"prefix-action\" type=\"button\">add</button>\n                    </b:prefix>\n                    <b:suffix>\n                        <button class=\"suffix-action\" type=\"button\">more</button>\n                    </b:suffix>\n                </FileCardList>\n            ";
+          _mount30 = mount(Demo), element = _mount30[1];
+          list = element.classList.contains('k-file-card-list') ? element : element.querySelector('.k-file-card-list');
+          expect(list.children[0].className).to.contain('k-file-card-list-prefix');
+          expect(list.children[1].className).to.contain('k-file-card');
+          expect(list.children[2].className).to.contain('k-file-card-list-suffix');
+        case 7:
+        case "end":
+          return _context60.stop();
+      }
+    }, _callee30);
+  })));
+  // 删除角标回到卡片内后，列表容器不再需要额外顶部留白。
+  it('should not add top padding for delete icon in lists', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee31() {
+    var Demo, _mount31, element, listWrap, listX, listY;
+    return _regeneratorRuntime.wrap(function _callee31$(_context62) {
+      while (1) switch (_context62.prev = _context62.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component31) {
+            _inheritsLoose(Demo, _Component31);
+            function Demo() {
+              var _context61;
+              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(_context61 = [this]).call(_context61, args)) || this;
+              _this31.FileCardList = FileCardList;
+              return _this31;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCardList } = this;\n                <div>\n                    <FileCardList\n                        className=\"wrap-list\"\n                        overflow=\"wrap\"\n                        deleteable\n                        items={[\n                            {key: 'c', name: 'c.pdf', type: 'file'},\n                        ]}\n                    />\n                    <FileCardList\n                        className=\"scroll-x-list\"\n                        overflow=\"scrollX\"\n                        deleteable\n                        items={[\n                            {key: 'a', name: 'a.pdf', type: 'file'},\n                        ]}\n                    />\n                    <FileCardList\n                        className=\"scroll-y-list\"\n                        overflow=\"scrollY\"\n                        deleteable\n                        items={[\n                            {key: 'b', name: 'b.pdf', type: 'file'},\n                        ]}\n                    />\n                </div>\n            ";
+          _mount31 = mount(Demo), element = _mount31[1];
+          listWrap = element.querySelector('.wrap-list');
+          listX = element.querySelector('.scroll-x-list');
+          listY = element.querySelector('.scroll-y-list');
+          expect(getComputedStyle(listWrap).paddingTop).to.eql('0px');
+          expect(getComputedStyle(listX).paddingTop).to.eql('0px');
+          expect(getComputedStyle(listY).paddingTop).to.eql('0px');
+        case 9:
+        case "end":
+          return _context62.stop();
+      }
+    }, _callee31);
+  })));
+});