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

package/components/fileCard/list.d.ts

@@ -0,0 +1,29 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import type { Events } from '../types';
+import type { FileCardProps, FileCardSize } from './fileCard';
+export interface FileCardListItem extends FileCardProps {
+    key?: string | number;
+}
+export interface FileCardListProps {
+    items?: FileCardListItem[];
+    size?: FileCardSize;
+    overflow?: 'wrap' | 'scrollX' | 'scrollY';
+    deleteable?: boolean;
+    showNameTooltip?: boolean;
+}
+export interface FileCardListBlocks {
+    extension: null;
+}
+export interface FileCardListEvents {
+    preview: [FileCardListItem, MouseEvent];
+    delete: [FileCardListItem, MouseEvent];
+    click: [FileCardListItem, MouseEvent];
+}
+export declare class FileCardList extends Component<FileCardListProps, FileCardListEvents, FileCardListBlocks> {
+    static template: string | import('intact-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<FileCardListProps>>;
+    static defaults: () => Partial<FileCardListProps>;
+    static events: Events<FileCardListEvents>;
+    private config;
+    private list;
+}

package/components/fileCard/list.js

@@ -0,0 +1,46 @@
+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 './list.vdt';
+import { useConfigContext } from '../config';
+import { useFileCardList } from './useFileCardList';
+var typeDefs = {
+  items: Array,
+  size: ['mini', 'small', 'default', 'large'],
+  overflow: ['wrap', 'scrollX', 'scrollY'],
+  deleteable: Boolean,
+  showNameTooltip: Boolean
+};
+var defaults = function defaults() {
+  return {
+    items: [],
+    size: 'default',
+    overflow: 'wrap',
+    deleteable: false,
+    showNameTooltip: false
+  };
+};
+var events = {
+  preview: true,
+  delete: true,
+  click: true
+};
+export var FileCardList = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(FileCardList, _Component);
+  function FileCardList() {
+    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.list = useFileCardList();
+    return _this;
+  }
+  return FileCardList;
+}(Component);
+FileCardList.template = template;
+FileCardList.typeDefs = typeDefs;
+FileCardList.defaults = defaults;
+FileCardList.events = events;

package/components/fileCard/list.vdt.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, map as _$ma, createUnknownComponentVNode as _$cc, createElementVNode as _$ce } from 'intact-vue-next';
+import { isInvalid, noop } from 'intact-shared';
+import { getRestProps, isEmptyString } from '../utils';
+import { makeStyles } from './styles';
+import { FileCard } from './fileCard';
+export default function ($props, $blocks, $__proto__) {
+  var _extends2;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _this$list = this.list,
+    getClassNameObj = _this$list.getClassNameObj,
+    getItemKey = _this$list.getItemKey,
+    getItemSize = _this$list.getItemSize,
+    shouldShowDelete = _this$list.shouldShowDelete,
+    shouldShowNameTooltip = _this$list.shouldShowNameTooltip,
+    onItemPreview = _this$list.onItemPreview,
+    onItemDelete = _this$list.onItemDelete,
+    onItemClick = _this$list.onItemClick;
+  var _this$get = this.get(),
+    className = _this$get.className,
+    items = _this$get.items;
+  var k = this.config.k;
+  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 extensionSlot = $blocks.extension ? $blocks.extension(noop, items) : undefined;
+  var hasExtensionSlot = !isEmptySlot(extensionSlot);
+  var classNameObj = _extends({}, getClassNameObj(), (_extends2 = {}, _extends2[className] = className, _extends2[makeStyles(k)] = true, _extends2));
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), [_$ma(items, function ($value, $key) {
+    return _$cc(FileCard, {
+      'key': getItemKey($value, $key),
+      'name': $value.name,
+      'type': $value.type,
+      'status': $value.status,
+      'src': $value.src,
+      'poster': $value.poster,
+      'description': $value.description,
+      'errorText': $value.errorText,
+      'loadingText': $value.loadingText,
+      'byte': $value.byte,
+      'percent': $value.percent,
+      'showPreview': $value.showPreview,
+      'showNameTooltip': shouldShowNameTooltip($value),
+      'showDelIcon': shouldShowDelete($value),
+      'icon': $value.icon,
+      'size': getItemSize($value),
+      'imageProps': $value.imageProps,
+      'videoProps': $value.videoProps,
+      'audioProps': $value.audioProps,
+      'ev-click': function evClick(value, e) {
+        return onItemClick($value, value, e);
+      },
+      'ev-preview': function evPreview(value, e) {
+        return onItemPreview($value, value, e);
+      },
+      'ev-delete': function evDelete(value, e) {
+        return onItemDelete($value, value, e);
+      }
+    }, getItemKey($value, $key));
+  }, $this), hasExtensionSlot ? _$ce(2, 'div', extensionSlot, 0, _$cn(k + "-file-card-list-extension")) : undefined]);
+}
+;

package/components/fileCard/styles.d.ts

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/fileCard/styles.js

@@ -0,0 +1,83 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults, setAlpha } from '../../styles/utils';
+import '../../styles/global';
+import { cache } from '../utils';
+var defaults = {
+  radius: '4px',
+  border: '1px solid #E5E8EE',
+  titleColor: '#3F3F51',
+  descriptionColor: '#868A9C',
+  progressBg: '#f0f2f4',
+  file: {
+    mini: {
+      width: '160px',
+      minHeight: '34px',
+      iconSize: '24px',
+      padding: '5px 10px',
+      gap: '8px'
+    },
+    small: {
+      width: '160px',
+      minHeight: '44px',
+      iconSize: '32px',
+      padding: '6px 12px',
+      gap: '8px'
+    },
+    default: {
+      width: '160px',
+      minHeight: '54px',
+      iconSize: '32px',
+      padding: '8px 12px',
+      gap: '8px'
+    },
+    large: {
+      width: '192px',
+      minHeight: '64px',
+      iconSize: '40px',
+      padding: '12px 14px',
+      gap: '10px'
+    }
+  },
+  fileIcon: {
+    defaultColor: '#596079',
+    pdfColor: '#D14343',
+    docColor: '#2D6AE3',
+    sheetColor: '#228B52',
+    slideColor: '#D97706',
+    archiveColor: '#6F52D9',
+    imageColor: '#0B84C6',
+    videoColor: '#D83A74',
+    audioColor: '#AF7C00'
+  },
+  maskBg: 'linear-gradient(180deg, rgba(21, 27, 30, 0.04), rgba(21, 27, 30, 0.62))',
+  /** 与 Upload 画廊 `overlap` 一致，用于图片默认预览遮罩 */
+  imagePreview: {
+    bgColor: 'rgba(21, 27, 30, .5)',
+    color: '#fff',
+    iconGap: '16px'
+  },
+  errorMaskBg: 'rgba(21, 27, 30, 0.46)',
+  errorTextColor: theme.color.danger,
+  actionBg: 'rgba(255, 255, 255, 0.18)',
+  actionColor: '#FFFFFF',
+  actionHoverBg: 'rgba(255, 255, 255, 0.26)',
+  deleteBg: 'rgba(63, 68, 81, 0.72)',
+  deleteColor: '#FFFFFF',
+  deleteHoverBg: 'rgba(63, 68, 81, 0.82)',
+  deleteHoverColor: '#FFFFFF',
+  deleteShadow: '0 2px 8px rgba(15, 23, 42, 0.16)',
+  listGap: '8px',
+  scrollbarThumb: 'rgba(63, 68, 81, 0.26)',
+  scrollbarThumbHover: 'rgba(63, 68, 81, 0.42)'
+};
+var fileCard;
+setDefault(function () {
+  fileCard = deepDefaults(theme, {
+    fileCard: defaults
+  }).fileCard;
+  makeStyles == null || makeStyles.clearCache();
+});
+export var makeStyles = cache(function makeStyles(k) {
+  return /*#__PURE__*/css("&.", k, "-file-card{position:relative;display:inline-flex;flex:0 0 auto;align-self:flex-start;vertical-align:top;width:auto;max-width:100%;min-width:0;border:", fileCard.border, ";border-radius:", fileCard.radius, ";background:#FFFFFF;box-sizing:border-box;overflow:visible;}&.", k, "-file-card.", k, "-file-card-file{width:", fileCard.file.small.width, ";min-height:", fileCard.file.small.minHeight, ";border:", fileCard.border, ";border-radius:", fileCard.radius, ";}&.", k, "-file-card.", k, "-file-card-file.", k, "-file-card-mini{width:", fileCard.file.mini.width, ";min-height:", fileCard.file.mini.minHeight, ";}&.", k, "-file-card.", k, "-file-card-file.", k, "-file-card-small{width:", fileCard.file.small.width, ";min-height:", fileCard.file.small.minHeight, ";}&.", k, "-file-card.", k, "-file-card-file.", k, "-file-card-default{width:", fileCard.file.default.width, ";min-height:", fileCard.file.default.minHeight, ";}&.", k, "-file-card.", k, "-file-card-file.", k, "-file-card-large{width:", fileCard.file.large.width, ";min-height:", fileCard.file.large.minHeight, ";}&.", k, "-file-card.", k, "-file-card-media.", k, "-file-card-type-image{border:none;background:transparent;}&.", k, "-file-card.", k, "-file-card-media.", k, "-file-card-type-video{border:none;background:transparent;}&.", k, "-file-card.", k, "-file-card-media.", k, "-file-card-type-audio{border:none;background:transparent;}.", k, "-file-card-media-shell{position:relative;min-width:0;box-sizing:border-box;}.", k, "-file-card-media-view{display:inline-flex;}.", k, "-file-card-media-status-layer{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;pointer-events:none;}.", k, "-file-card-media-status-layer>*{pointer-events:auto;}.", k, "-file-card-media-error-artwork-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;gap:4px;padding:0 4px;border-radius:inherit;background:#F3F5F6;box-sizing:border-box;}.", k, "-file-card-media-error-artwork-icon{display:block;width:32px;height:32px;flex:0 0 auto;}.", k, "-file-card-file-shell{position:relative;width:100%;min-width:0;border-radius:inherit;overflow:hidden;background:linear-gradient(\n                90deg,\n                ", fileCard.progressBg, " 0 var(--file-card-progress-percent, 0%),\n                #FFFFFF var(--file-card-progress-percent, 0%) 100%\n            );}.", k, "-file-card-file-main{display:flex;align-items:center;width:100%;min-width:0;gap:", fileCard.file.small.gap, ";padding:", fileCard.file.small.padding, ";box-sizing:border-box;}&.", k, "-file-card.", k, "-file-card-mini .", k, "-file-card-file-main{gap:", fileCard.file.mini.gap, ";padding:", fileCard.file.mini.padding, ";}&.", k, "-file-card.", k, "-file-card-large .", k, "-file-card-file-main{gap:", fileCard.file.large.gap, ";padding:", fileCard.file.large.padding, ";}&.", k, "-file-card.", k, "-file-card-default .", k, "-file-card-file-main{gap:", fileCard.file.default.gap, ";padding:", fileCard.file.default.padding, ";}.", k, "-file-card-file-icon,.", k, "-file-card-file-media-view{width:", fileCard.file.small.iconSize, ";height:", fileCard.file.small.iconSize, ";flex:0 0 auto;border-radius:4px;overflow:hidden;}.", k, "-file-card-file-icon{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:0.04em;color:", fileCard.fileIcon.defaultColor, ";}.", k, "-file-card-file-icon .", k, "-icon{font-size:16px;line-height:1;}&.", k, "-file-card.", k, "-file-card-mini .", k, "-file-card-file-icon,&.", k, "-file-card.", k, "-file-card-mini .", k, "-file-card-file-media-view{width:", fileCard.file.mini.iconSize, ";height:", fileCard.file.mini.iconSize, ";}&.", k, "-file-card.", k, "-file-card-mini .", k, "-file-card-file-icon{font-size:10px;}&.", k, "-file-card.", k, "-file-card-default .", k, "-file-card-file-icon,&.", k, "-file-card.", k, "-file-card-default .", k, "-file-card-file-media-view{width:", fileCard.file.default.iconSize, ";height:", fileCard.file.default.iconSize, ";}&.", k, "-file-card.", k, "-file-card-large .", k, "-file-card-file-icon,&.", k, "-file-card.", k, "-file-card-large .", k, "-file-card-file-media-view{width:", fileCard.file.large.iconSize, ";height:", fileCard.file.large.iconSize, ";}.", k, "-file-card-file-icon-img{display:block;width:100%;height:100%;object-fit:cover;}.", k, "-file-card-file-icon-pdf{color:", fileCard.fileIcon.pdfColor, ";}.", k, "-file-card-file-icon-doc{color:", fileCard.fileIcon.docColor, ";}.", k, "-file-card-file-icon-sheet{color:", fileCard.fileIcon.sheetColor, ";}.", k, "-file-card-file-icon-slide{color:", fileCard.fileIcon.slideColor, ";}.", k, "-file-card-file-icon-archive{color:", fileCard.fileIcon.archiveColor, ";}.", k, "-file-card-file-icon-image{color:", fileCard.fileIcon.imageColor, ";}.", k, "-file-card-file-icon-video{color:", fileCard.fileIcon.videoColor, ";}.", k, "-file-card-file-icon-audio{color:", fileCard.fileIcon.audioColor, ";}.", k, "-file-card-file-content{flex:1;min-width:0;}.", k, "-file-card-title{display:flex;align-items:baseline;min-width:0;color:", fileCard.titleColor, ";font-weight:400;}&.", k, "-file-card.", k, "-file-card-mini .", k, "-file-card-title{font-size:13px;line-height:18px;}&.", k, "-file-card.", k, "-file-card-large .", k, "-file-card-title{font-size:15px;line-height:22px;}.", k, "-file-card-title-prefix{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.", k, "-file-card-title-suffix{flex:0 0 auto;white-space:nowrap;}.", k, "-file-card-title-status{color:", fileCard.titleColor, ";}.", k, "-file-card-title-status-error{color:", theme.color.danger, ";}.", k, "-file-card-description{color:", fileCard.descriptionColor, ";font-size:12px;line-height:18px;margin-top:2px;}&.", k, "-file-card.", k, "-file-card-mini .", k, "-file-card-description{display:none;}.", k, "-file-card-action{color:inherit;border-radius:999px;background:transparent;transition:background ", theme.transition.small, ",color ", theme.transition.small, ",opacity ", theme.transition.small, ";}.", k, "-file-card-mask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:inherit;}.", k, "-file-card-mask{gap:10px;background:", fileCard.maskBg, ";opacity:0;transition:opacity ", theme.transition.small, ";pointer-events:none;}.", k, "-file-card-error-text{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-width:0;color:", fileCard.errorTextColor, ";font-size:12px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.", k, "-file-card-media-error-artwork-text{width:auto;max-width:100%;box-sizing:border-box;color:#FF4433;font-size:12px;line-height:12px;text-shadow:none;}.", k, "-file-card-mask>*{pointer-events:auto;}.", k, "-file-card-mask .", k, "-file-card-action{color:", fileCard.actionColor, ";background:", fileCard.actionBg, ";}.", k, "-file-card-mask .", k, "-file-card-action:hover{background:", fileCard.actionHoverBg, ";}&.", k, "-file-card:hover .", k, "-file-card-mask{opacity:1;}&.", k, "-file-card.", k, "-file-card-type-image .", k, "-file-card-mask{background:", fileCard.imagePreview.bgColor, ";gap:", fileCard.imagePreview.iconGap, ";color:", fileCard.imagePreview.color, ";transition:opacity ", theme.transition.middle, ";}&.", k, "-file-card.", k, "-file-card-type-image .", k, "-file-card-mask .", k, "-icon:not(:hover){color:inherit;}.", k, "-file-card-file-mask{background:rgba(255, 255, 255, 0.92);gap:8px;}.", k, "-file-card-file-mask .", k, "-file-card-action{color:#5D6378;background:rgba(63, 68, 81, 0.08);}.", k, "-file-card-file-mask .", k, "-file-card-action:hover{color:", theme.color.primary, ";background:", setAlpha(theme.color.primary, 0.12), ";}.", k, "-file-card-media-loading-text{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-width:0;color:#FFFFFF;font-size:12px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0, 0, 0, 0.28);}&.", k, "-file-card.", k, "-file-card-type-audio .", k, "-file-card-media-loading-text{color:#3A3D52;text-shadow:none;}.", k, "-file-card-media-progress-text{position:absolute;top:3px;left:20px;z-index:4;color:#FFFFFF;font-size:11px;line-height:14px;white-space:nowrap;text-shadow:0 1px 2px rgba(0, 0, 0, 0.35);}&.", k, "-file-card>.", k, "-file-card-delete{position:absolute;top:2px;right:2px;z-index:4;display:inline-flex;align-items:center;justify-content:center;width:16px;min-width:16px;height:16px;min-height:16px;flex:0 0 16px;margin:0;padding:0;border:none;border-radius:50%;cursor:pointer;color:", fileCard.deleteColor, ";background:", fileCard.deleteBg, ";box-shadow:", fileCard.deleteShadow, ";box-sizing:border-box;line-height:1;outline:none;opacity:0;pointer-events:none;transition:background ", theme.transition.small, ",opacity ", theme.transition.small, ";}&.", k, "-file-card>.", k, "-file-card-delete .", k, "-icon{margin:0;color:inherit;font-size:10px;line-height:1;}&.", k, "-file-card.", k, "-file-card-mini>.", k, "-file-card-delete{width:12px;min-width:12px;height:12px;min-height:12px;flex-basis:12px;}&.", k, "-file-card.", k, "-file-card-mini>.", k, "-file-card-delete .", k, "-icon{font-size:8px;}&.", k, "-file-card:hover>.", k, "-file-card-delete{opacity:1;pointer-events:auto;}&.", k, "-file-card>.", k, "-file-card-delete:hover,&.", k, "-file-card>.", k, "-file-card-delete:focus{color:", fileCard.deleteHoverColor, ";background:", fileCard.deleteHoverBg, ";box-shadow:", fileCard.deleteShadow, ";}&.", k, "-file-card.", k, "-file-card-error .", k, "-file-card-description{color:", theme.color.danger, ";}&.", k, "-file-card-list{display:flex;gap:", fileCard.listGap, ";align-items:flex-start;}&.", k, "-file-card-list-wrap{flex-wrap:wrap;align-items:flex-start;}&.", k, "-file-card-list-scrollX{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;box-sizing:border-box;width:100%;max-width:100%;min-width:0;scrollbar-width:thin;scrollbar-color:transparent transparent;scrollbar-gutter:stable;}&.", k, "-file-card-list-scrollY{flex-wrap:wrap;align-content:flex-start;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;height:100%;max-height:108px;min-height:0;max-width:100%;padding-right:6px;scrollbar-width:thin;scrollbar-color:transparent transparent;scrollbar-gutter:stable;}&.", k, "-file-card-list-scrollX::-webkit-scrollbar{height:8px;}&.", k, "-file-card-list-scrollY::-webkit-scrollbar{width:8px;}&.", k, "-file-card-list-scrollX::-webkit-scrollbar-track,&.", k, "-file-card-list-scrollY::-webkit-scrollbar-track{background:transparent;}&.", k, "-file-card-list-scrollX::-webkit-scrollbar-thumb,&.", k, "-file-card-list-scrollY::-webkit-scrollbar-thumb{border-radius:999px;border:2px solid transparent;background:transparent;background-clip:content-box;}&.", k, "-file-card-list-scrollX:hover,&.", k, "-file-card-list-scrollY:hover{scrollbar-color:", fileCard.scrollbarThumb, " transparent;}&.", k, "-file-card-list-scrollX:hover::-webkit-scrollbar-thumb,&.", k, "-file-card-list-scrollY:hover::-webkit-scrollbar-thumb{background:", fileCard.scrollbarThumb, ";background-clip:content-box;}&.", k, "-file-card-list-scrollX:hover::-webkit-scrollbar-thumb:hover,&.", k, "-file-card-list-scrollY:hover::-webkit-scrollbar-thumb:hover{background:", fileCard.scrollbarThumbHover, ";background-clip:content-box;}.", k, "-file-card-list-extension{flex:0 0 auto;}");
+});

package/components/fileCard/useFileCard.d.ts

@@ -0,0 +1,45 @@
+import type { MediaStatus, MediaType } from '../media';
+import type { FileCardValue } from './fileCard';
+export declare function useFileCard(): {
+    getRootClassNameObj: () => {
+        [x: string]: boolean;
+    };
+    getProgressStyle: () => string | undefined;
+    onClick: (e: MouseEvent) => void;
+    isMediaType: () => boolean;
+    shouldShowDeleteButton: () => boolean;
+    onDelete: (e: MouseEvent) => void;
+    getValue: () => FileCardValue;
+    onPreview: (media: any, e: MouseEvent) => void;
+    isLoading: () => boolean;
+    isError: () => boolean;
+    getMediaLoadingText: () => string;
+    getMediaErrorText: () => string;
+    getMediaErrorArtworkIconSrc: () => string;
+    shouldShowMediaStatusLayer: () => boolean;
+    shouldRenderMediaErrorArtwork: () => boolean;
+    shouldUseMediaErrorArtworkLayout: () => boolean;
+    shouldShowVisualMediaProgressText: () => boolean;
+    getMediaProgressText: () => string;
+    getFileBadgeClassName: () => "default" | "audio" | "video" | "image" | "slide" | "sheet" | "pdf" | "doc" | "archive";
+    getFileBadgeText: () => string;
+    hasCustomIcon: () => boolean;
+    getIconSource: () => string;
+    hasBuiltinIcon: () => boolean;
+    getBuiltinIconSource: () => string;
+    getFileName: () => string;
+    getFileTitleText: () => string;
+    getNamePrefix: () => string;
+    hasNameSuffix: () => boolean;
+    getNameSuffix: () => string;
+    shouldShowMiniFileStatusTitle: () => boolean;
+    getDisplayDescription: () => string;
+    getMediaType: () => MediaType;
+    getFileMediaType: () => MediaType;
+    getMediaStatus: () => MediaStatus;
+    getMediaShowPreview: () => boolean | undefined;
+    onMediaError: () => void;
+    getMediaSize: () => import("./fileCard").FileCardSize;
+    getFileMediaSize: () => 24 | 32;
+    shouldShowFileMedia: () => boolean;
+};

package/components/fileCard/useFileCard.js

@@ -0,0 +1,330 @@
+import _Number$isNaN from "@babel/runtime-corejs3/core-js/number/is-nan";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import { useInstance } from 'intact-vue-next';
+import { useConfigContext } from '../config';
+import { _$ } from '../../i18n';
+import { fileBadgeClassName, formatBytes, getFileCardDisplayName, guessFileExtension, resolveFileCardType, splitFileName } from './fileCardUtils';
+import { getBuiltinFileIconByExtension } from './fileCardAssets';
+import { mediaAudioCardErrorUrl, mediaImageCardErrorUrl, mediaVideoCardErrorUrl } from '../media/mediaAssets';
+export function useFileCard() {
+  var instance = useInstance();
+  var config = useConfigContext();
+  function getFileName() {
+    return getFileCardDisplayName(instance.get('name'), instance.get('src'));
+  }
+  // 文件行缩略图按真实资源类型识别，显式 type=file 不阻止媒体缩略图。
+  function getResourceType() {
+    var type = instance.get('type');
+    return resolveFileCardType(type === 'file' ? undefined : type, getFileName(), instance.get('src'));
+  }
+  function getResolvedType() {
+    return resolveFileCardType(instance.get('type'), getFileName(), instance.get('src'));
+  }
+  function getDisplayStatus() {
+    return instance.get('status') || 'default';
+  }
+  function getGuessExtension() {
+    return guessFileExtension(instance.get('type'), getFileName());
+  }
+  function isSpecifiedText(value) {
+    return value !== undefined && value !== null && value !== '';
+  }
+  function getErrorText() {
+    var errorText = instance.get('errorText');
+    if (errorText === '') return '';
+    return isSpecifiedText(errorText) ? errorText : _$('上传失败');
+  }
+  function getLoadingText() {
+    var loadingText = instance.get('loadingText');
+    if (loadingText === '') return '';
+    return isSpecifiedText(loadingText) ? loadingText : _$('上传中');
+  }
+  function hasSpecifiedMediaLoadingText() {
+    return isSpecifiedText(instance.get('loadingText'));
+  }
+  function hasSpecifiedMediaErrorText() {
+    return isSpecifiedText(instance.get('errorText'));
+  }
+  function hasPercentProp() {
+    var p = instance.get('percent');
+    return p !== undefined && p !== null && !_Number$isNaN(p);
+  }
+  // 进度只影响展示，统一限制在 0 到 100。
+  function getProgressPercent() {
+    var percent = instance.get('percent');
+    if (percent === undefined || percent === null || _Number$isNaN(percent)) return 0;
+    return Math.max(0, Math.min(100, percent));
+  }
+  function getProgressStyle() {
+    if (!isLoading() || !hasPercentProp()) return undefined;
+    return "--file-card-progress-percent: " + getProgressPercent() + "%;";
+  }
+  // 文件行状态文案统一带省略号和进度。
+  function getInlineStatusText() {
+    var status = getDisplayStatus();
+    if (status === 'loading') {
+      var loadingText = getLoadingText();
+      if (!loadingText) return hasPercentProp() ? Math.round(getProgressPercent()) + "%" : '';
+      return hasPercentProp() ? loadingText + "... " + Math.round(getProgressPercent()) + "%" : loadingText + "...";
+    }
+    if (status === 'error') return getErrorText();
+    return '';
+  }
+  function getByteText() {
+    var byte = instance.get('byte');
+    if (byte === undefined || byte === null || byte < 0) return '';
+    return formatBytes(byte);
+  }
+  function getDisplayDescription() {
+    if (isError()) return getErrorText();
+    if (isLoading()) return getInlineStatusText();
+    var description = instance.get('description');
+    if (description !== undefined && description !== null && description !== '') return description;
+    var byteText = getByteText();
+    var statusText = getInlineStatusText();
+    if (byteText && statusText) return byteText + " \xB7 " + statusText;
+    return byteText || statusText;
+  }
+  // 事件回调统一返回当前卡片的结构化信息。
+  function getValue() {
+    return {
+      name: getFileName(),
+      type: instance.get('type'),
+      resolvedType: getResolvedType(),
+      status: getDisplayStatus(),
+      src: instance.get('src'),
+      poster: instance.get('poster'),
+      description: getDisplayDescription(),
+      errorText: isError() ? getErrorText() : undefined,
+      loadingText: instance.get('loadingText'),
+      byte: instance.get('byte'),
+      percent: hasPercentProp() ? getProgressPercent() : undefined,
+      size: instance.get('size') || 'default'
+    };
+  }
+  function isMediaType() {
+    var resolvedType = getResolvedType();
+    return resolvedType === 'image' || resolvedType === 'video' || resolvedType === 'audio';
+  }
+  function isResourceMediaType() {
+    var resourceType = getResourceType();
+    return resourceType === 'image' || resourceType === 'video' || resourceType === 'audio';
+  }
+  function isLoading() {
+    return getDisplayStatus() === 'loading';
+  }
+  function isError() {
+    return getDisplayStatus() === 'error';
+  }
+  function isDone() {
+    return getDisplayStatus() === 'done';
+  }
+  function isMini() {
+    return (instance.get('size') || 'default') === 'mini';
+  }
+  function hasSource() {
+    return !!instance.get('src');
+  }
+  function isMediaLoadError() {
+    return !!instance.get('$mediaLoadError');
+  }
+  function setMediaLoadError(value) {
+    instance.set('$mediaLoadError', value);
+  }
+  function shouldShowDeleteButton() {
+    return !!instance.get('showDelIcon');
+  }
+  // mini 文件卡片在 loading/error 时，用状态文案占用标题位置。
+  function shouldShowMiniFileStatusTitle() {
+    return isMini() && !isMediaType() && (isLoading() || isError()) && !!getInlineStatusText();
+  }
+  function getFileTitleText() {
+    if (shouldShowMiniFileStatusTitle()) return getInlineStatusText();
+    return getFileName();
+  }
+  function getNamePrefix() {
+    return splitFileName(getFileName()).prefix;
+  }
+  function getNameSuffix() {
+    return splitFileName(getFileName()).suffix;
+  }
+  function hasNameSuffix() {
+    return !!getNameSuffix();
+  }
+  function getMediaType() {
+    return getResolvedType();
+  }
+  function isImageOrVideoMedia() {
+    var mediaType = getMediaType();
+    return mediaType === 'image' || mediaType === 'video';
+  }
+  function shouldKeepVisualMediaOnError() {
+    if (!isError() || !hasSource()) return false;
+    if (isMediaLoadError()) return false;
+    return isImageOrVideoMedia();
+  }
+  function getFileMediaType() {
+    return getResourceType();
+  }
+  function getMediaStatus() {
+    if (!isMediaType()) return 'default';
+    if (shouldKeepVisualMediaOnError()) return 'default';
+    return getDisplayStatus();
+  }
+  function getMediaShowPreview() {
+    if (isError()) return false;
+    return instance.get('showPreview');
+  }
+  function getMediaSize() {
+    return instance.get('size') || 'default';
+  }
+  function getFileMediaSize() {
+    if (isMini()) return 24;
+    return 32;
+  }
+  function shouldHideMediaStatusTextForSize() {
+    var size = getMediaSize();
+    return size === 'mini' || size === 'small';
+  }
+  // 显式媒体卡片只有在指定文案后才展示状态文字，mini/small 不展示。
+  function shouldShowMediaStatusLayer() {
+    if (!isMediaType()) return false;
+    if (shouldHideMediaStatusTextForSize()) return false;
+    if (isError()) return hasSpecifiedMediaErrorText();
+    if (isLoading()) return hasSpecifiedMediaLoadingText();
+    return false;
+  }
+  function getMediaLoadingText() {
+    if (!isLoading() || !hasSpecifiedMediaLoadingText()) return '';
+    return instance.get('loadingText') || '';
+  }
+  function getMediaErrorText() {
+    if (isError() && hasSpecifiedMediaErrorText()) return instance.get('errorText') || '';
+    return '';
+  }
+  function getMediaErrorArtworkIconSrc() {
+    var mediaType = getMediaType();
+    if (mediaType === 'audio') return mediaAudioCardErrorUrl;
+    if (mediaType === 'video') return mediaVideoCardErrorUrl;
+    return mediaImageCardErrorUrl;
+  }
+  function shouldRenderMediaErrorArtwork() {
+    return isMediaType() && isError() && !shouldHideMediaStatusTextForSize() && hasSpecifiedMediaErrorText();
+  }
+  function shouldUseMediaErrorArtworkLayout() {
+    return shouldRenderMediaErrorArtwork() && !shouldKeepVisualMediaOnError();
+  }
+  // 媒体卡片在 loading 且传入 percent 时都展示进度文本（不限制尺寸）。
+  function shouldShowVisualMediaProgressText() {
+    var mediaType = getMediaType();
+    return isLoading() && hasPercentProp() && (mediaType === 'image' || mediaType === 'video' || mediaType === 'audio');
+  }
+  function getMediaProgressText() {
+    return Math.round(getProgressPercent()) + "%";
+  }
+  function getFileBadgeText() {
+    if (getResourceType() === 'image') return 'IMG';
+    if (getResourceType() === 'video') return 'VID';
+    if (getResourceType() === 'audio') return 'AUD';
+    var ext = getGuessExtension();
+    if (!ext) return 'FILE';
+    return _sliceInstanceProperty(ext).call(ext, 0, 4).toUpperCase();
+  }
+  function getFileBadgeClassName() {
+    return fileBadgeClassName(getGuessExtension(), getResourceType());
+  }
+  function hasCustomIcon() {
+    return !isResourceMediaType() && !!instance.get('icon');
+  }
+  function getIconSource() {
+    return instance.get('icon') || '';
+  }
+  function getBuiltinIconSource() {
+    return getBuiltinFileIconByExtension(getGuessExtension(), getResourceType());
+  }
+  function hasBuiltinIcon() {
+    return !!getBuiltinIconSource();
+  }
+  function shouldShowFileMedia() {
+    if (isMediaType()) return false;
+    if (!isResourceMediaType() || !hasSource()) return false;
+    return instance.get('showPreview') !== false;
+  }
+  // 根节点类名集中描述类型、尺寸与状态，样式层只消费类名。
+  function getRootClassNameObj() {
+    var _ref;
+    var k = config.k;
+    var size = instance.get('size') || 'default';
+    var resolvedType = getResolvedType();
+    return _ref = {}, _ref[k + "-file-card-file"] = !isMediaType(), _ref[k + "-file-card-media"] = isMediaType(), _ref[k + "-file-card-file-media"] = shouldShowFileMedia(), _ref[k + "-file-card-type-" + resolvedType] = true, _ref[k + "-file-card-" + size] = true, _ref[k + "-file-card-loading"] = isLoading(), _ref[k + "-file-card-error"] = isError(), _ref[k + "-file-card-done"] = isDone(), _ref[k + "-file-card-media-error-artwork"] = shouldUseMediaErrorArtworkLayout(), _ref[k + "-file-card-progressing"] = isLoading() && hasPercentProp(), _ref[k + "-file-card-deletable"] = shouldShowDeleteButton(), _ref;
+  }
+  function onClick(e) {
+    instance.trigger('click', getValue(), e);
+  }
+  function onPreview(media, e) {
+    e.stopPropagation();
+    instance.trigger('preview', getValue(), e);
+  }
+  function onDelete(e) {
+    e.stopPropagation();
+    instance.trigger('delete', getValue(), e);
+  }
+  function onMediaError() {
+    setMediaLoadError(true);
+  }
+  function bootstrap() {
+    instance.set('$mediaLoadError', false, {
+      silent: true
+    });
+    ['src', 'type', 'poster'].forEach(function (key) {
+      instance.watch(key, function () {
+        return setMediaLoadError(false);
+      });
+    });
+    instance.watch('status', function (status) {
+      if (status !== 'error') setMediaLoadError(false);
+    });
+  }
+  bootstrap();
+  return {
+    getRootClassNameObj: getRootClassNameObj,
+    getProgressStyle: getProgressStyle,
+    onClick: onClick,
+    isMediaType: isMediaType,
+    shouldShowDeleteButton: shouldShowDeleteButton,
+    onDelete: onDelete,
+    getValue: getValue,
+    onPreview: onPreview,
+    isLoading: isLoading,
+    isError: isError,
+    getMediaLoadingText: getMediaLoadingText,
+    getMediaErrorText: getMediaErrorText,
+    getMediaErrorArtworkIconSrc: getMediaErrorArtworkIconSrc,
+    shouldShowMediaStatusLayer: shouldShowMediaStatusLayer,
+    shouldRenderMediaErrorArtwork: shouldRenderMediaErrorArtwork,
+    shouldUseMediaErrorArtworkLayout: shouldUseMediaErrorArtworkLayout,
+    shouldShowVisualMediaProgressText: shouldShowVisualMediaProgressText,
+    getMediaProgressText: getMediaProgressText,
+    getFileBadgeClassName: getFileBadgeClassName,
+    getFileBadgeText: getFileBadgeText,
+    hasCustomIcon: hasCustomIcon,
+    getIconSource: getIconSource,
+    hasBuiltinIcon: hasBuiltinIcon,
+    getBuiltinIconSource: getBuiltinIconSource,
+    getFileName: getFileName,
+    getFileTitleText: getFileTitleText,
+    getNamePrefix: getNamePrefix,
+    hasNameSuffix: hasNameSuffix,
+    getNameSuffix: getNameSuffix,
+    shouldShowMiniFileStatusTitle: shouldShowMiniFileStatusTitle,
+    getDisplayDescription: getDisplayDescription,
+    getMediaType: getMediaType,
+    getFileMediaType: getFileMediaType,
+    getMediaStatus: getMediaStatus,
+    getMediaShowPreview: getMediaShowPreview,
+    onMediaError: onMediaError,
+    getMediaSize: getMediaSize,
+    getFileMediaSize: getFileMediaSize,
+    shouldShowFileMedia: shouldShowFileMedia
+  };
+}

package/components/fileCard/useFileCardList.d.ts

@@ -0,0 +1,14 @@
+import type { FileCardListItem } from './list';
+import type { FileCardValue } from './fileCard';
+export declare function useFileCardList(): {
+    getClassNameObj: () => {
+        [x: string]: boolean;
+    };
+    getItemKey: (item: FileCardListItem, index: number) => string | number;
+    getItemSize: (item: FileCardListItem) => import("./fileCard").FileCardSize;
+    shouldShowDelete: (item: FileCardListItem) => boolean;
+    shouldShowNameTooltip: (item: FileCardListItem) => boolean;
+    onItemPreview: (item: FileCardListItem, _value: FileCardValue, e: MouseEvent) => void;
+    onItemDelete: (item: FileCardListItem, _value: FileCardValue, e: MouseEvent) => void;
+    onItemClick: (item: FileCardListItem, _value: FileCardValue, e: MouseEvent) => void;
+};