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

package/components/drawer/index.js

@@ -1,22 +1,41 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import template from './index.vdt';
 import { BaseDialog } from '../dialog/base';
 import { placements } from './styles';
+import { useDrawerResizable } from './useDrawerResizable';
 var typeDefs = _extends({}, BaseDialog.typeDefs, {
-  placement: placements
+  placement: placements,
+  resizable: Boolean
 });
 var defaults = function defaults() {
   return _extends({}, BaseDialog.defaults(), {
     placement: 'right',
-    draggable: false
+    draggable: false,
+    resizable: false
   });
 };
 export var Drawer = /*#__PURE__*/function (_BaseDialog) {
   _inheritsLoose(Drawer, _BaseDialog);
   function Drawer() {
-    return _BaseDialog.apply(this, arguments) || this;
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _BaseDialog.call.apply(_BaseDialog, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this._resizable = useDrawerResizable(_this.dialogRef);
+    return _this;
   }
+  var _proto = Drawer.prototype;
+  _proto.init = function init() {
+    var _this2 = this;
+    _BaseDialog.prototype.init.call(this);
+    this.watch('width', function (v) {
+      _this2._resizable.drawerWidth.set(v || null);
+    });
+  };
   return Drawer;
 }(BaseDialog);
 Drawer.template = template;

package/components/drawer/index.spec.js

@@ -167,4 +167,87 @@ describe('Drawer', function () {
       }
     }, _callee5);
   })));
+  it('should show resize bar when resizable is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var Demo, _mount5, instance, element;
+    return _regeneratorRuntime.wrap(function _callee6$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component2) {
+            _inheritsLoose(Demo, _Component2);
+            function Demo() {
+              var _context7;
+              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(_context7 = [this]).call(_context7, args)) || this;
+              _this2.Drawer = Drawer;
+              return _this2;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const {Drawer} = this;\n                <Drawer value={true} resizable={true} placement=\"right\">\n                    <div>Content</div>\n                </Drawer>\n            ";
+          _mount5 = mount(Demo), instance = _mount5[0], element = _mount5[1];
+          _context8.next = 5;
+          return wait();
+        case 5:
+          expect(getElement('.k-drawer-resize')).to.not.be.undefined;
+        case 6:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee6);
+  })));
+  it('should update width when dragging', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var Demo, _mount6, instance, element, drawer, initialWidth, resizeBar, startX;
+    return _regeneratorRuntime.wrap(function _callee7$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component3) {
+            _inheritsLoose(Demo, _Component3);
+            function Demo() {
+              var _context9;
+              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(_context9 = [this]).call(_context9, args)) || this;
+              _this3.Drawer = Drawer;
+              return _this3;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const {Drawer} = this;\n                <Drawer value={true} resizable={true} placement=\"right\" ref=\"drawer\">\n                    <div>Content</div>\n                </Drawer>\n            ";
+          _mount6 = mount(Demo), instance = _mount6[0], element = _mount6[1];
+          _context10.next = 5;
+          return wait();
+        case 5:
+          drawer = instance.refs.drawer.dialogRef.value;
+          initialWidth = drawer.offsetWidth;
+          resizeBar = getElement('.k-drawer-resize');
+          startX = resizeBar.getBoundingClientRect().left;
+          dispatchEvent(resizeBar, 'mousedown', {
+            clientX: startX,
+            which: 1
+          });
+          _context10.next = 12;
+          return wait();
+        case 12:
+          dispatchEvent(document, 'mousemove', {
+            clientX: startX - 50
+          });
+          _context10.next = 15;
+          return wait();
+        case 15:
+          dispatchEvent(document, 'mouseup');
+          _context10.next = 18;
+          return wait(100);
+        case 18:
+          expect(drawer.offsetWidth).to.be.greaterThan(initialWidth);
+        case 19:
+        case "end":
+          return _context10.stop();
+      }
+    }, _callee7);
+  })));
 });

package/components/drawer/index.vdt.js

@@ -7,16 +7,36 @@ export default function ($props, $blocks, $__proto__) {
   var $this = this;
   var _this$get = this.get(),
     placement = _this$get.placement,
-    overlay = _this$get.overlay;
+    overlay = _this$get.overlay,
+    resizable = _this$get.resizable,
+    width = _this$get.width;
+  var _this$_resizable = this._resizable,
+    getResizeBarPosition = _this$_resizable.getResizeBarPosition,
+    getHeightResizeBarPosition = _this$_resizable.getHeightResizeBarPosition,
+    drawerWidth = _this$_resizable.drawerWidth,
+    isResizing = _this$_resizable.isResizing,
+    drawerHeight = _this$_resizable.drawerHeight,
+    startWidth = _this$_resizable.startWidth,
+    startHeight = _this$_resizable.startHeight;
+  var shouldShowHeightResizeBar = !!(resizable && (placement === 'top' || placement === 'bottom'));
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-drawer"] = true, _classNameObj[k + "-" + placement] = true, _classNameObj[makeStyles(overlay, k)] = true, _classNameObj);
   return _$su.call($this, {
-    'className': _$cn(classNameObj)
+    'className': _$cn(classNameObj),
+    'width': resizable ? drawerWidth.value || width : width
   }, function ($blocks) {
     var _$blocks = {},
       __$blocks = _$ex({}, $blocks);
     return (_$blocks['_content'] = function ($super) {
-      return _$ce(2, 'div', $super(), 0, _$cn(k + "-drawer-content"));
+      return _$ce(2, 'div', [$super(), !!resizable ? _$ce(2, 'div', null, 1, _$cn(k + "-drawer-resize " + k + "-drawer-resize-" + getResizeBarPosition()), {
+        'ev-mousedown': startWidth
+      }) : undefined, shouldShowHeightResizeBar ? _$ce(2, 'div', null, 1, _$cn(k + "-drawer-resize-horizontal " + k + "-drawer-resize-" + getHeightResizeBarPosition()), {
+        'ev-mousedown': startHeight
+      }) : undefined], 0, _$cn(k + "-drawer-content " + (isResizing.value ? k + "-drawer-resizing" : '')), {
+        'style': drawerHeight.value ? {
+          height: drawerHeight.value + "px"
+        } : null
+      });
     }, __$blocks['_content'] = function ($super, data) {
       var block = $blocks['_content'];
       var callBlock = function callBlock() {

package/components/drawer/styles.js

@@ -21,7 +21,7 @@ setDefault(function () {
 });
 export var makeStyles = cache(function makeStyles(overlay, k) {
   var borderRadius = theme.largeBorderRadius;
-  return /*#__PURE__*/css("&.k-drawer{position:fixed;background:transparent;box-shadow:none;border-radius:0;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.", k, "-drawer-content{transition:transform ", drawer.transition, ";}}.", k, "-drawer-content{height:100%;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";.", k, "-dialog-body{flex-grow:1;overflow:auto;}}", makePlacementStyles(k, 'right', "right: 0; height: 100%;", "translateX(100%)", borderRadius + " 0 0 " + borderRadius), " ", makePlacementStyles(k, 'left', 'left: 0; height: 100%;', "translateX(-100%)", "0 " + borderRadius + " " + borderRadius + " 0"), " ", makePlacementStyles(k, 'top', 'left: 50%; top: 0; transform: translateX(-50%);', "translateY(-100%)", "0 0 " + borderRadius + " " + borderRadius), " ", makePlacementStyles(k, 'bottom', 'left: 50%; bottom: 0; transform: translateX(-50%);', "translateY(100%)", "0 " + borderRadius + " " + borderRadius + " 0"), " &.", k, "-top,&.", k, "-bottom{width:100%;}");
+  return /*#__PURE__*/css("&.k-drawer{position:fixed;background:transparent;box-shadow:none;border-radius:0;max-height:100vh;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.", k, "-drawer-content{transition:transform ", drawer.transition, ";}}.", k, "-drawer-content{height:100%;max-height:100vh;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";position:relative;.", k, "-dialog-body{flex-grow:1;overflow:auto;}&.", k, "-drawer-resizing{transition:none!important;}}.", k, "-drawer-resize{position:absolute;top:0;bottom:0;width:5px;cursor:col-resize;z-index:10;user-select:none;&:hover{background:rgba(0, 0, 0, 0.1);}&.", k, "-drawer-resize-right{right:0;}&.", k, "-drawer-resize-left{left:0;}}.", k, "-drawer-resize-horizontal{position:absolute;left:0;right:0;height:5px;cursor:row-resize;z-index:10;user-select:none;&:hover{background:rgba(0, 0, 0, 0.1);}&.", k, "-drawer-resize-top{top:0;}&.", k, "-drawer-resize-bottom{bottom:0;}}", makePlacementStyles(k, 'right', "right: 0; height: 100%;", "translateX(100%)", borderRadius + " 0 0 " + borderRadius), " ", makePlacementStyles(k, 'left', 'left: 0; height: 100%;', "translateX(-100%)", "0 " + borderRadius + " " + borderRadius + " 0"), " ", makePlacementStyles(k, 'top', 'left: 50%; top: 0; transform: translateX(-50%);', "translateY(-100%)", "0 0 " + borderRadius + " " + borderRadius), " ", makePlacementStyles(k, 'bottom', 'left: 50%; bottom: 0; transform: translateX(-50%);', "translateY(100%)", "0 " + borderRadius + " " + borderRadius + " 0"), " &.", k, "-top,&.", k, "-bottom{width:100%;}");
 });
 function makePlacementStyles(k, placement, styles, transform, borderRadius) {
   return /*#__PURE__*/css("&.", k, "-drawer.", k, "-", placement, "{", styles, " &.transition-enter-from,&.transition-leave-to,&.transition-appear-from{.", k, "-drawer-content{transform:", transform, ";}}.", k, "-drawer-content{border-radius:", borderRadius, ";}}");

package/components/drawer/useDrawerResizable.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'intact-vue-next';
+export declare function useDrawerResizable(drawerRef: RefObject<HTMLElement>): {
+    drawerWidth: import("../../hooks/useState").State<string | number | null>;
+    drawerHeight: import("../../hooks/useState").State<number | null>;
+    isResizing: import("../../hooks/useState").State<boolean>;
+    getResizeBarPosition: () => 'left' | 'right';
+    getHeightResizeBarPosition: () => 'top' | 'bottom';
+    startWidth: (e: MouseEvent) => void;
+    startHeight: (e: MouseEvent) => void;
+};

package/components/drawer/useDrawerResizable.js

@@ -0,0 +1,162 @@
+import { useInstance, onMounted, onBeforeUnmount } from 'intact-vue-next';
+import { useState } from '../../hooks/useState';
+import { useDraggable } from '../../hooks/useDraggable';
+export function useDrawerResizable(drawerRef) {
+  var instance = useInstance();
+  var _instance$get = instance.get(),
+    width = _instance$get.width;
+  var drawerWidth = useState(width || null);
+  var drawerHeight = useState(null);
+  var isResizing = useState(false);
+  var startX = 0;
+  var startWidth = 0;
+  var startY = 0;
+  var startHeight = 0;
+  var minWidth = 200; // 最小宽度
+  var maxWidth = window.innerWidth; // 最大宽度
+  var minHeight = 200; // 最小高度
+  var maxHeight = window.innerHeight; // 最大高度
+  // 监听窗口大小变化，更新最大宽高
+  var handleResize = null;
+  onMounted(function () {
+    handleResize = function handleResize() {
+      maxWidth = window.innerWidth;
+      maxHeight = window.innerHeight;
+    };
+    window.addEventListener('resize', handleResize);
+  });
+  onBeforeUnmount(function () {
+    if (handleResize) {
+      window.removeEventListener('resize', handleResize);
+    }
+  });
+  // 宽度拖拽
+  function onStartWidth(e) {
+    var drawer = drawerRef.value;
+    if (!drawer) return;
+    startX = e.clientX;
+    startWidth = drawer.offsetWidth;
+    drawerWidth.set(startWidth);
+    isResizing.set(true);
+    // 锁定全局样式
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+  }
+  function onMoveWidth(e) {
+    var drawer = drawerRef.value;
+    if (!drawer) return;
+    var _instance$get2 = instance.get(),
+      placement = _instance$get2.placement,
+      resizable = _instance$get2.resizable;
+    // 计算鼠标移动距离
+    var deltaX = e.clientX - startX;
+    var widthDelta = deltaX;
+    // 根据 placement 调整拖拽方向
+    if (placement === 'right') {
+      widthDelta = -deltaX;
+    } else if (placement === 'left') {
+      widthDelta = deltaX;
+    } else {
+      // top / bottom 模式：由于是居中（left: 50%, transform: translateX(-50%)）对称增长
+      // 宽度变化量应该是位移的两倍才能保持鼠标跟随
+      widthDelta = deltaX * 2;
+    }
+    var newWidth = Math.max(minWidth, Math.min(maxWidth, startWidth + widthDelta));
+    drawerWidth.set(newWidth);
+  }
+  function onEndWidth() {
+    isResizing.set(false);
+    // 恢复全局样式
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+  }
+  var widthDrag = useDraggable({
+    onStart: onStartWidth,
+    onMove: onMoveWidth,
+    onEnd: onEndWidth,
+    disable: function disable() {
+      var _instance$get3 = instance.get(),
+        resizable = _instance$get3.resizable;
+      return !resizable;
+    }
+  });
+  // 高度拖拽，仅在 placement 为 top / bottom 时启用
+  function onStartHeight(e) {
+    var drawer = drawerRef.value;
+    if (!drawer) return;
+    var _instance$get4 = instance.get(),
+      placement = _instance$get4.placement,
+      resizable = _instance$get4.resizable;
+    if (!resizable || placement !== 'top' && placement !== 'bottom') return;
+    startY = e.clientY;
+    startHeight = drawer.offsetHeight;
+    drawerHeight.set(startHeight);
+    isResizing.set(true);
+    // 锁定全局样式
+    document.body.style.cursor = 'row-resize';
+    document.body.style.userSelect = 'none';
+  }
+  function onMoveHeight(e) {
+    var drawer = drawerRef.value;
+    if (!drawer) return;
+    var _instance$get5 = instance.get(),
+      placement = _instance$get5.placement;
+    if (placement !== 'top' && placement !== 'bottom') return;
+    var deltaY = e.clientY - startY;
+    var heightDelta = placement === 'top' ? deltaY : -deltaY;
+    var newHeight = Math.max(minHeight, Math.min(maxHeight, startHeight + heightDelta));
+    // 设置状态，由模板进行渲染
+    drawerHeight.set(newHeight);
+  }
+  function onEndHeight() {
+    isResizing.set(false);
+    // 恢复全局样式
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+  }
+  var heightDrag = useDraggable({
+    onStart: onStartHeight,
+    onMove: onMoveHeight,
+    onEnd: onEndHeight,
+    disable: function disable() {
+      var _instance$get6 = instance.get(),
+        placement = _instance$get6.placement,
+        resizable = _instance$get6.resizable;
+      return !resizable || placement !== 'top' && placement !== 'bottom';
+    }
+  });
+  // 重置 resize 状态
+  function resetResizeState() {
+    var _instance$get7 = instance.get(),
+      width = _instance$get7.width;
+    drawerWidth.set(width || null);
+    drawerHeight.set(null);
+  }
+  // 监听 placement 变化，切换时重置 resize 状态
+  instance.watch('placement', function (newPlacement, oldPlacement) {
+    if (oldPlacement !== undefined && newPlacement !== oldPlacement) {
+      resetResizeState();
+    }
+  });
+  // 获取宽度拖拽条位置
+  function getResizeBarPosition() {
+    var _instance$get8 = instance.get(),
+      placement = _instance$get8.placement;
+    return placement === 'right' ? 'left' : 'right';
+  }
+  // 获取高度拖拽条位置
+  function getHeightResizeBarPosition() {
+    var _instance$get9 = instance.get(),
+      placement = _instance$get9.placement;
+    return placement === 'top' ? 'bottom' : 'top';
+  }
+  return {
+    drawerWidth: drawerWidth,
+    drawerHeight: drawerHeight,
+    isResizing: isResizing,
+    getResizeBarPosition: getResizeBarPosition,
+    getHeightResizeBarPosition: getHeightResizeBarPosition,
+    startWidth: widthDrag.start,
+    startHeight: heightDrag.start
+  };
+}

package/components/fileCard/fileCard.d.ts

@@ -0,0 +1,65 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import type { Events } from '../types';
+import type { ResolvedFileCardType } from './fileCardUtils';
+import type { MediaMaskValue } from '../media';
+export type { ResolvedFileCardType } from './fileCardUtils';
+export type FileCardType = 'file' | 'image' | 'video' | 'audio' | string;
+export type FileCardStatus = 'default' | 'loading' | 'error' | 'done';
+export type FileCardSize = 'mini' | 'small' | 'default' | 'large';
+export type FileCardNativeProps = Record<string, any>;
+export type FileCardValue = {
+    name?: string;
+    type?: FileCardType;
+    resolvedType: ResolvedFileCardType;
+    status: FileCardStatus;
+    src?: string;
+    poster?: string;
+    description?: string;
+    errorText?: string;
+    loadingText?: string;
+    byte?: number;
+    percent?: number;
+    size: FileCardSize;
+};
+export type FileCardMaskValue = FileCardValue & {
+    canPreview?: MediaMaskValue['canPreview'];
+    preview?: MediaMaskValue['preview'];
+};
+export interface FileCardProps {
+    name?: string;
+    type?: FileCardType;
+    status?: FileCardStatus;
+    src?: string;
+    poster?: string;
+    description?: string;
+    errorText?: string;
+    loadingText?: string;
+    byte?: number;
+    percent?: number;
+    showPreview?: boolean;
+    showNameTooltip?: boolean;
+    showDelIcon?: boolean;
+    icon?: string;
+    size?: FileCardSize;
+    imageProps?: FileCardNativeProps;
+    videoProps?: FileCardNativeProps;
+    audioProps?: FileCardNativeProps;
+}
+export interface FileCardEvents {
+    click: [FileCardValue, MouseEvent];
+    preview: [FileCardValue, MouseEvent];
+    delete: [FileCardValue, MouseEvent];
+}
+export interface FileCardBlocks {
+    icon: null;
+    description: null;
+    mask: FileCardMaskValue;
+}
+export declare class FileCard extends Component<FileCardProps, FileCardEvents, FileCardBlocks> {
+    static template: string | import('intact-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<FileCardProps>>;
+    static defaults: () => Partial<FileCardProps>;
+    static events: Events<FileCardEvents>;
+    private config;
+    private model;
+}

package/components/fileCard/fileCard.js

@@ -0,0 +1,72 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact-vue-next';
+import template from './fileCard.vdt';
+import { useConfigContext } from '../config';
+import { useFileCard } from './useFileCard';
+var typeDefs = {
+  name: String,
+  type: String,
+  status: ['default', 'loading', 'error', 'done'],
+  src: String,
+  poster: String,
+  description: String,
+  errorText: String,
+  loadingText: String,
+  byte: Number,
+  percent: Number,
+  showPreview: Boolean,
+  showNameTooltip: Boolean,
+  showDelIcon: Boolean,
+  icon: String,
+  size: ['mini', 'small', 'default', 'large'],
+  imageProps: Object,
+  videoProps: Object,
+  audioProps: Object
+};
+var defaults = function defaults() {
+  return {
+    name: undefined,
+    type: undefined,
+    status: 'default',
+    src: undefined,
+    poster: undefined,
+    description: undefined,
+    errorText: undefined,
+    loadingText: undefined,
+    byte: undefined,
+    percent: undefined,
+    showPreview: true,
+    showNameTooltip: false,
+    showDelIcon: false,
+    icon: undefined,
+    size: 'default',
+    imageProps: undefined,
+    videoProps: undefined,
+    audioProps: undefined
+  };
+};
+var events = {
+  click: true,
+  preview: true,
+  delete: true
+};
+export var FileCard = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(FileCard, _Component);
+  function FileCard() {
+    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.config = useConfigContext();
+    _this.model = useFileCard();
+    return _this;
+  }
+  return FileCard;
+}(Component);
+FileCard.template = template;
+FileCard.typeDefs = typeDefs;
+FileCard.defaults = defaults;
+FileCard.events = events;

package/components/fileCard/fileCard.vdt.js

@@ -0,0 +1,161 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, createUnknownComponentVNode as _$cc, extend as _$ex, EMPTY_OBJ as _$em, noop as _$no } from 'intact-vue-next';
+import { Icon } from '../icon';
+import { Media } from '../media';
+import { getRestProps, isEmptyString } from '../utils';
+import { makeStyles } from './styles';
+import { _$ } from '../../i18n';
+import { isInvalid, noop } from 'intact-shared';
+export default function ($props, $blocks, $__proto__) {
+  var _extends2, _$cn2, _$cn3;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+  var _this$model = this.model,
+    getRootClassNameObj = _this$model.getRootClassNameObj,
+    getProgressStyle = _this$model.getProgressStyle,
+    onClick = _this$model.onClick,
+    isMediaType = _this$model.isMediaType,
+    shouldShowDeleteButton = _this$model.shouldShowDeleteButton,
+    onDelete = _this$model.onDelete,
+    getValue = _this$model.getValue,
+    onPreview = _this$model.onPreview,
+    isError = _this$model.isError,
+    getMediaLoadingText = _this$model.getMediaLoadingText,
+    getMediaErrorText = _this$model.getMediaErrorText,
+    getMediaErrorArtworkIconSrc = _this$model.getMediaErrorArtworkIconSrc,
+    shouldShowMediaStatusLayer = _this$model.shouldShowMediaStatusLayer,
+    shouldRenderMediaErrorArtwork = _this$model.shouldRenderMediaErrorArtwork,
+    shouldUseMediaErrorArtworkLayout = _this$model.shouldUseMediaErrorArtworkLayout,
+    shouldShowVisualMediaProgressText = _this$model.shouldShowVisualMediaProgressText,
+    getMediaProgressText = _this$model.getMediaProgressText,
+    getFileBadgeClassName = _this$model.getFileBadgeClassName,
+    getFileBadgeText = _this$model.getFileBadgeText,
+    hasCustomIcon = _this$model.hasCustomIcon,
+    getIconSource = _this$model.getIconSource,
+    hasBuiltinIcon = _this$model.hasBuiltinIcon,
+    getBuiltinIconSource = _this$model.getBuiltinIconSource,
+    getFileName = _this$model.getFileName,
+    getFileTitleText = _this$model.getFileTitleText,
+    getNamePrefix = _this$model.getNamePrefix,
+    hasNameSuffix = _this$model.hasNameSuffix,
+    getNameSuffix = _this$model.getNameSuffix,
+    shouldShowMiniFileStatusTitle = _this$model.shouldShowMiniFileStatusTitle,
+    getDisplayDescription = _this$model.getDisplayDescription,
+    getMediaType = _this$model.getMediaType,
+    getFileMediaType = _this$model.getFileMediaType,
+    getMediaStatus = _this$model.getMediaStatus,
+    getMediaShowPreview = _this$model.getMediaShowPreview,
+    onMediaError = _this$model.onMediaError,
+    getMediaSize = _this$model.getMediaSize,
+    getFileMediaSize = _this$model.getFileMediaSize,
+    shouldShowFileMedia = _this$model.shouldShowFileMedia;
+  var _this$get = this.get(),
+    className = _this$get.className,
+    style = _this$get.style;
+  var k = this.config.k;
+  var maskBlock = $blocks.mask;
+  var isEmptySlot = function isEmptySlot(value) {
+    if (isInvalid(value) || isEmptyString(value)) return true;
+    if (Array.isArray(value)) return value.every(function (item) {
+      return isEmptySlot(item);
+    });
+    if (value && value.type === 1) return isEmptySlot(value.children);
+    return false;
+  };
+  var value = getValue();
+  var shouldShowFileContent = !isMediaType();
+  var descriptionSlot = shouldShowFileContent && $blocks.description ? $blocks.description(noop, value) : undefined;
+  var fileMaskSlot = shouldShowFileContent && maskBlock ? maskBlock(noop, value) : undefined;
+  var hasDescriptionSlot = !isEmptySlot(descriptionSlot);
+  var hasFileMaskSlot = !isEmptySlot(fileMaskSlot);
+  var isMini = (this.get('size') || 'default') === 'mini';
+  var showDescription = !isMini && (hasDescriptionSlot || !!getDisplayDescription());
+  var classNameObj = _extends((_extends2 = {}, _extends2[k + "-file-card"] = true, _extends2[className] = className, _extends2[makeStyles(k)] = true, _extends2), getRootClassNameObj());
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this), {
+    'style': style,
+    'ev-click': onClick
+  }), [shouldShowDeleteButton() ? _$ce(2, 'div', _$cc(Icon, {
+    'className': _$cn(k + "-icon-close-bold"),
+    'color': 'inherit'
+  }), 2, _$cn(k + "-file-card-delete"), {
+    'title': _$('删除'),
+    'ev-click': onDelete
+  }) : undefined, !shouldShowFileContent ? _$ce(2, 'div', [_$cc(Media, {
+    'className': _$cn(k + "-file-card-media-view"),
+    'name': getFileName(),
+    'type': getMediaType(),
+    'status': getMediaStatus(),
+    'src': this.get('src'),
+    'poster': this.get('poster'),
+    'size': getMediaSize(),
+    'showPreview': getMediaShowPreview(),
+    'showNameTooltip': this.get('showNameTooltip'),
+    'imageProps': this.get('imageProps'),
+    'videoProps': this.get('videoProps'),
+    'audioProps': this.get('audioProps'),
+    'ev-preview': onPreview,
+    'ev-loadError': onMediaError,
+    '$blocks': function ($blocks) {
+      var _$blocks = {},
+        __$blocks = _$ex({}, $blocks);
+      return (_$blocks['error'] = function ($super) {
+        return shouldRenderMediaErrorArtwork() ? _$ce(2, 'div', [_$ce(2, 'img', null, 1, _$cn(k + "-file-card-media-error-artwork-icon"), {
+          'src': getMediaErrorArtworkIconSrc(),
+          'alt': '',
+          'draggable': false
+        }), _$ce(2, 'span', getMediaErrorText(), 0, _$cn(k + "-file-card-error-text " + k + "-file-card-media-error-artwork-text"))], 4, _$cn(k + "-file-card-media-error-artwork-content")) : undefined;
+      }, __$blocks['error'] = function ($super, data) {
+        var block = $blocks['error'];
+        var callBlock = function callBlock() {
+          return _$blocks['error'].call($this, $super, data);
+        };
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }), (_$blocks['mask'] = function ($super, media) {
+        return maskBlock && maskBlock(noop, media);
+      }, __$blocks['mask'] = function ($super, data) {
+        var block = $blocks['mask'];
+        var callBlock = function callBlock() {
+          return _$blocks['mask'].call($this, $super, data);
+        };
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }), __$blocks;
+    }.call($this, _$em)
+  }), shouldShowMediaStatusLayer() && !shouldUseMediaErrorArtworkLayout() ? _$ce(2, 'div', _$ce(2, 'span', isError() ? getMediaErrorText() : getMediaLoadingText(), 0, _$cn((_$cn2 = {}, _$cn2[k + "-file-card-media-loading-text"] = !isError(), _$cn2[k + "-file-card-error-text"] = isError(), _$cn2))), 2, _$cn(k + "-file-card-media-status-layer")) : undefined, shouldShowVisualMediaProgressText() ? _$ce(2, 'div', getMediaProgressText(), 0, _$cn(k + "-file-card-media-progress-text")) : undefined], 0, _$cn(k + "-file-card-media-shell")) : _$ce(2, 'div', [_$ce(2, 'div', [shouldShowFileMedia() ? _$cc(Media, {
+    'className': _$cn(k + "-file-card-file-media-view"),
+    'name': getFileName(),
+    'type': getFileMediaType(),
+    'src': this.get('src'),
+    'poster': this.get('poster'),
+    'size': getFileMediaSize(),
+    'showPreview': this.get('showPreview'),
+    'showNameTooltip': false,
+    'imageProps': this.get('imageProps'),
+    'videoProps': this.get('videoProps'),
+    'audioProps': this.get('audioProps'),
+    'ev-preview': onPreview
+  }) : _$ce(2, 'div', hasCustomIcon() ? _$ce(2, 'img', null, 1, _$cn(k + "-file-card-file-icon-img"), {
+    'src': getIconSource(),
+    'alt': getFileName()
+  }) : $blocks.icon ? (_$blocks['icon'] = function ($super) {
+    return null;
+  }, __$blocks['icon'] = function ($super, data) {
+    var block = $blocks['icon'];
+    var callBlock = function callBlock() {
+      return _$blocks['icon'].call($this, $super, data);
+    };
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['icon'](_$no, getValue())) : hasBuiltinIcon() ? _$ce(2, 'img', null, 1, _$cn(k + "-file-card-file-icon-img"), {
+    'src': getBuiltinIconSource(),
+    'alt': getFileName()
+  }) : _$ce(2, 'span', getFileBadgeText(), 0), 0, _$cn(k + "-file-card-file-icon " + k + "-file-card-file-icon-" + getFileBadgeClassName())), _$ce(2, 'div', [_$ce(2, 'div', shouldShowMiniFileStatusTitle() ? _$ce(2, 'span', getFileTitleText(), 0, _$cn((_$cn3 = {}, _$cn3[k + "-file-card-title-prefix"] = true, _$cn3[k + "-file-card-title-status"] = true, _$cn3[k + "-file-card-title-status-error"] = isError(), _$cn3))) : [_$ce(2, 'span', getNamePrefix(), 0, _$cn(k + "-file-card-title-prefix")), hasNameSuffix() ? _$ce(2, 'span', getNameSuffix(), 0, _$cn(k + "-file-card-title-suffix")) : undefined], 0, _$cn(k + "-file-card-title"), {
+    'title': getFileTitleText()
+  }), showDescription ? _$ce(2, 'div', hasDescriptionSlot ? descriptionSlot : _$ce(2, 'span', getDisplayDescription(), 0), 0, _$cn(k + "-file-card-description")) : undefined], 0, _$cn(k + "-file-card-file-content"))], 4, _$cn(k + "-file-card-file-main")), hasFileMaskSlot ? _$ce(2, 'div', fileMaskSlot, 0, _$cn(k + "-file-card-mask " + k + "-file-card-file-mask")) : undefined], 0, _$cn(k + "-file-card-file-shell"), {
+    'style': getProgressStyle()
+  })]);
+}
+;

package/components/fileCard/fileCardAssets.d.ts

@@ -0,0 +1 @@
+export declare function getBuiltinFileIconByExtension(ext: string, resolvedType?: 'file' | 'image' | 'video' | 'audio'): string;