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

package/components/media/media.d.ts

@@ -0,0 +1,37 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import type { Events } from '../types';
+import type { Container } from '../portal';
+import type { TooltipProps } from '../tooltip';
+import type { MediaBlocks, MediaNativeProps, MediaSizeValue, MediaStatus, MediaType, MediaValue, MediaViewerItem } from './types';
+export type { MediaNativeProps, MediaBlocks, MediaMaskValue, MediaSize, MediaSizeValue, MediaStatus, MediaType, MediaValue, MediaViewerItem, ResolvedMediaType, } from './types';
+export interface MediaProps {
+    name?: string;
+    type?: MediaType;
+    status?: MediaStatus;
+    src?: string;
+    poster?: string;
+    size?: MediaSizeValue;
+    width?: string | number;
+    height?: string | number;
+    showPreview?: boolean;
+    showNameTooltip?: boolean;
+    nameTooltipProps?: TooltipProps;
+    container?: Container;
+    imageProps?: MediaNativeProps;
+    videoProps?: MediaNativeProps;
+    audioProps?: MediaNativeProps;
+}
+export interface MediaEvents {
+    click: [MediaValue, MouseEvent];
+    preview: [MediaViewerItem, MouseEvent];
+    load: [MediaValue, Event];
+    loadError: [MediaValue, Event];
+}
+export declare class Media extends Component<MediaProps, MediaEvents, MediaBlocks> {
+    static template: string | import('intact-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<MediaProps>>;
+    static defaults: () => Partial<MediaProps>;
+    static events: Events<MediaEvents>;
+    private config;
+    private media;
+}

package/components/media/media.js

@@ -0,0 +1,67 @@
+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 './media.vdt';
+import { useConfigContext } from '../config';
+import { useMedia } from './useMedia';
+var typeDefs = {
+  name: String,
+  type: String,
+  status: ['default', 'loading', 'error', 'done'],
+  src: String,
+  poster: String,
+  size: ['mini', 'small', 'default', 'large', String, Number],
+  width: [String, Number],
+  height: [String, Number],
+  showPreview: Boolean,
+  showNameTooltip: Boolean,
+  nameTooltipProps: Object,
+  container: [String, Function],
+  imageProps: Object,
+  videoProps: Object,
+  audioProps: Object
+};
+var defaults = function defaults() {
+  return {
+    name: undefined,
+    type: undefined,
+    status: 'default',
+    src: undefined,
+    poster: undefined,
+    size: 'default',
+    width: undefined,
+    height: undefined,
+    showPreview: true,
+    showNameTooltip: false,
+    nameTooltipProps: undefined,
+    container: undefined,
+    imageProps: undefined,
+    videoProps: undefined,
+    audioProps: undefined
+  };
+};
+var events = {
+  click: true,
+  preview: true,
+  load: true,
+  loadError: true
+};
+export var Media = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Media, _Component);
+  function Media() {
+    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.media = useMedia();
+    return _this;
+  }
+  return Media;
+}(Component);
+Media.template = template;
+Media.typeDefs = typeDefs;
+Media.defaults = defaults;
+Media.events = events;

package/components/media/media.vdt.js

@@ -0,0 +1,202 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createElementVNode as _$ce, className as _$cn, createVNode as _$cv, createUnknownComponentVNode as _$cc, extend as _$ex, EMPTY_OBJ as _$em } from 'intact-vue-next';
+import { Icon } from '../icon';
+import { Tooltip } from '../tooltip';
+import { isInvalid, noop } from 'intact-shared';
+import { getRestProps, addStyle, isEmptyString } from '../utils';
+import { MediaViewer } from './viewer';
+import { makeMediaStyles, makeMediaViewerStyles } from './styles';
+var _$tmp0 = {
+  'tabindex': '-1'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _extends2;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _this$media = this.media,
+    getRootClassNameObj = _this$media.getRootClassNameObj,
+    getRootStyle = _this$media.getRootStyle,
+    getFileName = _this$media.getFileName,
+    isLoading = _this$media.isLoading,
+    shouldShowImage = _this$media.shouldShowImage,
+    shouldShowVideo = _this$media.shouldShowVideo,
+    shouldShowAudioLoader = _this$media.shouldShowAudioLoader,
+    shouldShowAudioCard = _this$media.shouldShowAudioCard,
+    shouldShowErrorCard = _this$media.shouldShowErrorCard,
+    imageRef = _this$media.imageRef,
+    videoRef = _this$media.videoRef,
+    audioRef = _this$media.audioRef,
+    getImageProps = _this$media.getImageProps,
+    getVideoProps = _this$media.getVideoProps,
+    getVideoKey = _this$media.getVideoKey,
+    getAudioLoaderProps = _this$media.getAudioLoaderProps,
+    getAudioCardAssetSrc = _this$media.getAudioCardAssetSrc,
+    getErrorCardAssetSrc = _this$media.getErrorCardAssetSrc,
+    getMediaCardIconStyle = _this$media.getMediaCardIconStyle,
+    shouldShowLoadingIndicator = _this$media.shouldShowLoadingIndicator,
+    shouldShowPlaceholder = _this$media.shouldShowPlaceholder,
+    getPreviewIconClassName = _this$media.getPreviewIconClassName,
+    getPlaceholderIconClassName = _this$media.getPlaceholderIconClassName,
+    getPreviewTitle = _this$media.getPreviewTitle,
+    onClick = _this$media.onClick,
+    onPreview = _this$media.onPreview,
+    canPreview = _this$media.canPreview,
+    shouldShowVideoPlayTrigger = _this$media.shouldShowVideoPlayTrigger,
+    shouldShowMaskLayer = _this$media.shouldShowMaskLayer,
+    getViewerItem = _this$media.getViewerItem,
+    getMaskValue = _this$media.getMaskValue,
+    isStandalonePreviewRendered = _this$media.isStandalonePreviewRendered,
+    isStandalonePreviewVisible = _this$media.isStandalonePreviewVisible,
+    closeStandalonePreview = _this$media.closeStandalonePreview,
+    afterStandalonePreviewClose = _this$media.afterStandalonePreviewClose;
+  var _this$get = this.get(),
+    className = _this$get.className,
+    style = _this$get.style;
+  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 renderSlot = function renderSlot(name, params) {
+    return $blocks[name] ? $blocks[name](noop, params) : undefined;
+  };
+  var viewerItem = getViewerItem();
+  var maskValue = getMaskValue();
+  var loadingSlot = isLoading() ? renderSlot('loading', viewerItem) : undefined;
+  var errorSlot = this.media.isError() ? renderSlot('error', viewerItem) : undefined;
+  var maskSlot = shouldShowMaskLayer() ? renderSlot('mask', maskValue) : undefined;
+  var hasLoadingSlot = !isEmptySlot(loadingSlot);
+  var hasErrorSlot = !isEmptySlot(errorSlot);
+  var hasMaskSlot = !isEmptySlot(maskSlot);
+  var showCustomLoadingLayer = isLoading() && hasLoadingSlot;
+  var showCustomErrorLayer = this.media.isError() && hasErrorSlot;
+  var showCustomMaskLayer = hasMaskSlot && shouldShowMaskLayer();
+  var showCustomStateLayer = showCustomLoadingLayer || showCustomErrorLayer;
+  var showVideoPlayTrigger = shouldShowVideoPlayTrigger() && !showCustomStateLayer;
+  var shouldShowOverlay = canPreview() || showCustomMaskLayer || showVideoPlayTrigger;
+  var shouldShowDefaultPreviewTrigger = canPreview() || showVideoPlayTrigger;
+  var shouldShowPreviewTriggerInOverlay = canPreview() && !showVideoPlayTrigger;
+  var shouldShowStandalonePreviewTrigger = shouldShowDefaultPreviewTrigger && showVideoPlayTrigger;
+  var showNameTooltip = this.get('showNameTooltip');
+  var nameTooltipProps = _extends({
+    theme: 'light'
+  }, this.get('nameTooltipProps') || {});
+  var mediaName = getFileName();
+  var audioCard = _$ce(2, 'div', _$ce(2, 'img', null, 1, _$cn(k + "-media-card-icon " + k + "-media-audio-card-icon"), {
+    'src': getAudioCardAssetSrc(),
+    'alt': '',
+    'draggable': false,
+    'style': getMediaCardIconStyle()
+  }), 2, _$cn(k + "-media-audio-card"));
+  var errorCard = _$ce(2, 'div', _$ce(2, 'img', null, 1, _$cn(k + "-media-card-icon " + k + "-media-error-card-icon"), {
+    'src': getErrorCardAssetSrc(),
+    'alt': '',
+    'draggable': false,
+    'style': getMediaCardIconStyle()
+  }), 2, _$cn(k + "-media-error-card"));
+  var classNameObj = _extends({}, getRootClassNameObj(), (_extends2 = {}, _extends2[k + "-media-custom-loading"] = showCustomLoadingLayer, _extends2[k + "-media-custom-error"] = showCustomErrorLayer, _extends2[k + "-media-custom-mask"] = showCustomMaskLayer, _extends2[className] = className, _extends2[makeMediaStyles(k)] = true, _extends2));
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj),
+    'style': addStyle(style, getRootStyle()),
+    'title': showNameTooltip ? undefined : getFileName()
+  }, getRestProps(this), {
+    'ev-click': onClick
+  }), [_$ce(2, 'div', [shouldShowImage() ? _$cv('img', _extends({
+    'className': _$cn(k + "-media-image"),
+    'ref': imageRef
+  }, getImageProps())) : shouldShowVideo() ? _$cv('video', _extends({
+    'key': getVideoKey(),
+    'className': _$cn(k + "-media-video"),
+    'ref': videoRef
+  }, getVideoProps())) : undefined, shouldShowAudioLoader() ? _$cv('audio', _extends({
+    'className': _$cn(k + "-media-audio-loader"),
+    'ref': audioRef
+  }, getAudioLoaderProps())) : undefined, shouldShowErrorCard() && !showCustomErrorLayer ? errorCard : shouldShowAudioCard() && !showCustomStateLayer ? audioCard : shouldShowPlaceholder() && !showCustomLoadingLayer && !showCustomErrorLayer ? _$ce(2, 'div', _$cc(Icon, {
+    'className': _$cn(getPlaceholderIconClassName())
+  }), 2, _$cn(k + "-media-placeholder")) : undefined, shouldShowLoadingIndicator() && !showCustomLoadingLayer ? _$ce(2, 'div', _$ce(2, 'span', null, 1, _$cn(k + "-media-loading-spinner")), 2, _$cn(k + "-media-loading-indicator")) : undefined, showNameTooltip ? _$cc(Tooltip, _extends({
+    'className': _$cn(k + "-media-name-tooltip")
+  }, nameTooltipProps, {
+    'children': _$ce(2, 'div', null, 1, _$cn(k + "-media-name-tooltip-trigger"), _$tmp0),
+    '$blocks': function ($blocks) {
+      var _$blocks = {},
+        __$blocks = _$ex({}, $blocks);
+      return (_$blocks['content'] = function ($super) {
+        return _$ce(2, 'div', mediaName, 0, _$cn(k + "-media-name-tooltip-content"), {
+          'style': {
+            maxWidth: '160px',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+          }
+        });
+      }, __$blocks['content'] = function ($super, data) {
+        var block = $blocks['content'];
+        var callBlock = function callBlock() {
+          return _$blocks['content'].call($this, $super, data);
+        };
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }), __$blocks;
+    }.call($this, _$em)
+  })) : undefined, showCustomStateLayer && showCustomLoadingLayer ? _$ce(2, 'div', loadingSlot, 0, _$cn(k + "-media-state-layer " + k + "-media-loading-layer")) : undefined, showCustomStateLayer && showCustomErrorLayer ? _$ce(2, 'div', errorSlot, 0, _$cn(k + "-media-state-layer " + k + "-media-error-layer")) : undefined, shouldShowOverlay ? _$ce(2, 'div', [showCustomMaskLayer ? maskSlot : undefined, shouldShowPreviewTriggerInOverlay && !showCustomMaskLayer ? _$ce(2, 'button', _$cc(Icon, {
+    'className': _$cn(k + "-media-preview-icon " + getPreviewIconClassName()),
+    'size': 'large'
+  }), 2, _$cn(k + "-media-preview-trigger"), {
+    'type': 'button',
+    'title': getPreviewTitle(),
+    'disabled': !canPreview(),
+    'ev-click': onPreview
+  }) : undefined], 0, _$cn(k + "-media-overlay")) : undefined, shouldShowStandalonePreviewTrigger && !showCustomMaskLayer ? showNameTooltip ? _$cc(Tooltip, _extends({
+    'className': _$cn(k + "-media-name-tooltip")
+  }, nameTooltipProps, {
+    'children': _$ce(2, 'button', _$cc(Icon, {
+      'className': _$cn(k + "-media-preview-icon " + getPreviewIconClassName()),
+      'size': 'large'
+    }), 2, _$cn(k + "-media-preview-trigger " + k + "-media-video-preview-trigger"), {
+      'type': 'button',
+      'title': getPreviewTitle(),
+      'disabled': !canPreview(),
+      'ev-click': onPreview
+    }),
+    '$blocks': function ($blocks) {
+      var _$blocks = {},
+        __$blocks = _$ex({}, $blocks);
+      return (_$blocks['content'] = function ($super) {
+        return _$ce(2, 'div', mediaName, 0, _$cn(k + "-media-name-tooltip-content"), {
+          'style': {
+            maxWidth: '160px',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+          }
+        });
+      }, __$blocks['content'] = function ($super, data) {
+        var block = $blocks['content'];
+        var callBlock = function callBlock() {
+          return _$blocks['content'].call($this, $super, data);
+        };
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }), __$blocks;
+    }.call($this, _$em)
+  })) : _$ce(2, 'button', _$cc(Icon, {
+    'className': _$cn(k + "-media-preview-icon " + getPreviewIconClassName()),
+    'size': 'large'
+  }), 2, _$cn(k + "-media-preview-trigger " + k + "-media-video-preview-trigger"), {
+    'type': 'button',
+    'title': getPreviewTitle(),
+    'disabled': !canPreview(),
+    'ev-click': onPreview
+  }) : undefined], 0, _$cn(k + "-media-shell")), isStandalonePreviewRendered() ? _$cc(MediaViewer, {
+    'value': isStandalonePreviewVisible(),
+    'item': viewerItem,
+    'container': this.get('container'),
+    'onClose': closeStandalonePreview,
+    'onAfterClose': afterStandalonePreviewClose,
+    'className': _$cn(makeMediaViewerStyles(k))
+  }) : undefined]);
+}
+;

package/components/media/mediaAssets.d.ts

@@ -0,0 +1,4 @@
+export declare const mediaAudioCardUrl: string;
+export declare const mediaImageCardErrorUrl: string;
+export declare const mediaVideoCardErrorUrl: string;
+export declare const mediaAudioCardErrorUrl: string;

package/components/media/mediaAssets.js

@@ -0,0 +1,9 @@
+// 资源内联，避免框架包构建时依赖额外图片文件复制。
+var mediaAudioCardSvg = ['<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">', '<g clip-path="url(#clip0_24923_23617)">', '<path d="M1.19995 2.4C1.19995 1.07452 2.27447 0 3.59995 0H14.4017L22.8 8.39355V21.6C22.8 22.9255 21.7254 24 20.4 24H3.59995C2.27447 24 1.19995 22.9255 1.19995 21.6V2.4Z" fill="url(#paint0_linear_24923_23617)"/>', '<path d="M15.7916 10.2829C15.1728 10.2829 14.5793 10.037 14.1417 9.59944C13.7041 9.16185 13.4583 8.56836 13.4583 7.94952H12.2916V13.6429C11.805 13.3177 11.2236 13.1645 10.64 13.2076C10.0563 13.2507 9.50381 13.4876 9.07021 13.8807C8.63661 14.2738 8.3468 14.8005 8.24683 15.3771C8.14687 15.9537 8.24247 16.5473 8.51845 17.0634C8.79444 17.5794 9.23497 17.9885 9.77007 18.2255C10.3052 18.4626 10.9041 18.514 11.4718 18.3716C12.0395 18.2293 12.5433 17.9013 12.9032 17.4398C13.2631 16.9783 13.4585 16.4098 13.4583 15.8245V10.5541C14.0993 11.1296 14.9301 11.4484 15.7916 11.4495V10.2829Z" fill="white"/>', '<g filter="url(#filter0_f_24923_23617)">', '<path d="M13.8 0L22.8 9H16.2C14.8746 9 13.8 7.92548 13.8 6.6V0Z" fill="#FA655E"/>', '</g>', '<path d="M14.3999 0L22.7999 8.4H16.7999C15.4744 8.4 14.3999 7.32548 14.3999 6V0Z" fill="#FEC6C2"/>', '</g>', '<defs>', '<filter id="filter0_f_24923_23617" x="10.8" y="-3" width="15" height="15" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">', '<feFlood flood-opacity="0" result="BackgroundImageFix"/>', '<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>', '<feGaussianBlur stdDeviation="1.5" result="effect1_foregroundBlur_24923_23617"/>', '</filter>', '<linearGradient id="paint0_linear_24923_23617" x1="1.19995" y1="0" x2="25.2" y2="24" gradientUnits="userSpaceOnUse">', '<stop stop-color="#FDA79C"/>', '<stop offset="1" stop-color="#FF8787"/>', '</linearGradient>', '<clipPath id="clip0_24923_23617">', '<rect width="24" height="24" fill="white"/>', '</clipPath>', '</defs>', '</svg>'].join('');
+export var mediaAudioCardUrl = "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(mediaAudioCardSvg);
+var mediaImageCardErrorSvg = ['<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">', '<g clip-path="url(#clip0_25770_6783)">', '<path d="M1.6001 3.2C1.6001 1.43269 3.03279 0 4.8001 0H19.2024L30.4001 11.1914V28.8C30.4001 30.5673 28.9674 32 27.2001 32H4.8001C3.03279 32 1.6001 30.5673 1.6001 28.8V3.2Z" fill="url(#paint0_linear_25770_6783)"/>', '<path d="M8.24289 22.3474L11.1107 18.1323C11.1475 18.0783 11.1956 18.033 11.2518 17.9996C11.3079 17.9663 11.3707 17.9457 11.4357 17.9393C11.5007 17.9329 11.5664 17.9408 11.628 17.9626C11.6895 17.9844 11.7456 18.0194 11.7921 18.0652L13.6875 19.9222L17.8459 13.4042C17.8871 13.3395 17.9442 13.2865 18.0119 13.2504C18.0795 13.2142 18.1553 13.1961 18.232 13.1979C18.3086 13.1996 18.3835 13.2211 18.4495 13.2602C18.5154 13.2993 18.5701 13.3548 18.6084 13.4213L23.7752 22.3756C23.8144 22.4434 23.8351 22.5203 23.8351 22.5986C23.8352 22.6769 23.8146 22.7539 23.7754 22.8217C23.7362 22.8896 23.6799 22.9459 23.612 22.985C23.5441 23.0241 23.4672 23.0447 23.3888 23.0446H8.61173C8.53054 23.0447 8.45085 23.0227 8.38126 22.9809C8.31167 22.9391 8.25481 22.8791 8.21683 22.8074C8.17885 22.7356 8.16118 22.6548 8.16574 22.5738C8.1703 22.4927 8.19691 22.4145 8.2427 22.3474H8.24289Z" fill="white"/>', '<path d="M9.10168 12.8034C9.10168 13.3996 9.33855 13.9715 9.76017 14.3931C10.1818 14.8147 10.7536 15.0516 11.3499 15.0516C11.9462 15.0516 12.518 14.8147 12.9396 14.3931C13.3612 13.9715 13.5981 13.3996 13.5981 12.8034C13.5981 12.2071 13.3612 11.6353 12.9396 11.2137C12.518 10.792 11.9462 10.5552 11.3499 10.5552C10.7536 10.5552 10.1818 10.792 9.76017 11.2137C9.33855 11.6353 9.10168 12.2071 9.10168 12.8034Z" fill="white"/>', '<g filter="url(#filter0_f_25770_6783)">', '<path d="M18.4001 0L30.4001 12H21.6001C19.8328 12 18.4001 10.5673 18.4001 8.8V0Z" fill="#C9CAD6"/>', '</g>', '<path d="M19.2001 0L30.4001 11.2H22.4001C20.6328 11.2 19.2001 9.76731 19.2001 8V0Z" fill="#F2F2F3"/>', '</g>', '<defs>', '<filter id="filter0_f_25770_6783" x="14.4001" y="-4" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">', '<feFlood flood-opacity="0" result="BackgroundImageFix"/>', '<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>', '<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_25770_6783"/>', '</filter>', '<linearGradient id="paint0_linear_25770_6783" x1="1.6001" y1="0" x2="33.6001" y2="32" gradientUnits="userSpaceOnUse">', '<stop stop-color="#ECECEC"/>', '<stop offset="1" stop-color="#D6DCE7"/>', '</linearGradient>', '<clipPath id="clip0_25770_6783">', '<rect width="32" height="32" fill="white"/>', '</clipPath>', '</defs>', '</svg>'].join('');
+export var mediaImageCardErrorUrl = "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(mediaImageCardErrorSvg);
+var mediaVideoCardErrorSvg = ['<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">', '<g clip-path="url(#clip0_25770_6789)">', '<path d="M1.6001 3.2C1.6001 1.43269 3.03279 0 4.8001 0H19.2024L30.4001 11.1914V28.8C30.4001 30.5673 28.9674 32 27.2001 32H4.8001C3.03279 32 1.6001 30.5673 1.6001 28.8V3.2Z" fill="url(#paint0_linear_25770_6789)"/>', '<path d="M13.4815 12.9907C13.2152 12.8215 12.8669 13.0128 12.8669 13.3283V21.8719C12.8669 22.1874 13.2152 22.3787 13.4815 22.2095L20.2025 17.9377C20.4497 17.7805 20.4497 17.4197 20.2025 17.2625L13.4815 12.9907Z" fill="white"/>', '<g filter="url(#filter0_f_25770_6789)">', '<path d="M18.4001 0L30.4001 12H21.6001C19.8328 12 18.4001 10.5673 18.4001 8.8V0Z" fill="#C9CAD6"/>', '</g>', '<path d="M19.2001 0L30.4001 11.2H22.4001C20.6328 11.2 19.2001 9.76731 19.2001 8V0Z" fill="#F2F2F3"/>', '</g>', '<defs>', '<filter id="filter0_f_25770_6789" x="14.4001" y="-4" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">', '<feFlood flood-opacity="0" result="BackgroundImageFix"/>', '<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>', '<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_25770_6789"/>', '</filter>', '<linearGradient id="paint0_linear_25770_6789" x1="1.6001" y1="0" x2="33.6001" y2="32" gradientUnits="userSpaceOnUse">', '<stop stop-color="#ECECEC"/>', '<stop offset="1" stop-color="#D6DCE7"/>', '</linearGradient>', '<clipPath id="clip0_25770_6789">', '<rect width="32" height="32" fill="white"/>', '</clipPath>', '</defs>', '</svg>'].join('');
+export var mediaVideoCardErrorUrl = "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(mediaVideoCardErrorSvg);
+var mediaAudioCardErrorSvg = ['<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">', '<g clip-path="url(#clip0_25770_6777)">', '<path d="M1.6001 3.2C1.6001 1.43269 3.03279 0 4.8001 0H19.2024L30.4001 11.1914V28.8C30.4001 30.5673 28.9674 32 27.2001 32H4.8001C3.03279 32 1.6001 30.5673 1.6001 28.8V3.2Z" fill="url(#paint0_linear_25770_6777)"/>', '<path d="M21.0556 13.7107C20.2305 13.7107 19.4391 13.3829 18.8557 12.7995C18.2722 12.2161 17.9445 11.4247 17.9445 10.5996H16.3889V18.1907C15.7401 17.7572 14.965 17.5529 14.1868 17.6104C13.4086 17.6679 12.6719 17.9837 12.0937 18.5078C11.5156 19.0319 11.1292 19.7342 10.9959 20.503C10.8626 21.2719 10.9901 22.0633 11.3581 22.7514C11.726 23.4395 12.3134 23.9849 13.0269 24.301C13.7403 24.617 14.539 24.6856 15.2958 24.4958C16.0527 24.306 16.7245 23.8686 17.2044 23.2533C17.6843 22.638 17.9448 21.8799 17.9445 21.0996V14.0724C18.7992 14.8397 19.9069 15.2648 21.0556 15.2663V13.7107Z" fill="white"/>', '<g filter="url(#filter0_f_25770_6777)">', '<path d="M18.4001 0L30.4001 12H21.6001C19.8328 12 18.4001 10.5673 18.4001 8.8V0Z" fill="#C9CAD6"/>', '</g>', '<path d="M19.2001 0L30.4001 11.2H22.4001C20.6328 11.2 19.2001 9.76731 19.2001 8V0Z" fill="#F2F2F3"/>', '</g>', '<defs>', '<filter id="filter0_f_25770_6777" x="14.4001" y="-4" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">', '<feFlood flood-opacity="0" result="BackgroundImageFix"/>', '<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>', '<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_25770_6777"/>', '</filter>', '<linearGradient id="paint0_linear_25770_6777" x1="1.6001" y1="0" x2="33.6001" y2="32" gradientUnits="userSpaceOnUse">', '<stop stop-color="#ECECEC"/>', '<stop offset="1" stop-color="#D6DCE7"/>', '</linearGradient>', '<clipPath id="clip0_25770_6777">', '<rect width="32" height="32" fill="white"/>', '</clipPath>', '</defs>', '</svg>'].join('');
+export var mediaAudioCardErrorUrl = "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(mediaAudioCardErrorSvg);

package/components/media/mediaUtils.d.ts

@@ -0,0 +1,6 @@
+import type { MediaSize, MediaSizeValue, MediaType, ResolvedMediaType } from './types';
+export declare function getMediaDisplayName(name?: string, src?: string): string;
+export declare function resolveMediaType(type?: MediaType, name?: string, src?: string): ResolvedMediaType;
+export declare function isNamedMediaSize(size: MediaSizeValue | undefined): size is MediaSize;
+export declare function normalizeMediaLength(value?: string | number): string | undefined;
+export declare function parseMediaPixelLength(value?: string | number): number | undefined;

package/components/media/mediaUtils.js

@@ -0,0 +1,66 @@
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js/instance/starts-with";
+import _Number$isFinite from "@babel/runtime-corejs3/core-js/number/is-finite";
+import { _$ } from '../../i18n';
+var IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'svg', 'avif'];
+var VIDEO_EXTENSIONS = ['mp4', 'mov', 'm4v', 'webm', 'mkv', 'avi'];
+var AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'm4a', 'aac', 'flac'];
+function deriveNameFromSrc(src) {
+  if (!src) return '';
+  var withoutHash = src.split('#')[0];
+  var withoutQuery = withoutHash.split('?')[0];
+  var segments = withoutQuery.split('/');
+  return decodeURIComponent(segments[segments.length - 1] || '');
+}
+function guessExtension(type, displayName) {
+  var _context;
+  var rawType = _trimInstanceProperty(_context = (type || '').toLowerCase()).call(_context);
+  if (_includesInstanceProperty(rawType).call(rawType, '/')) {
+    var _rawType$split = rawType.split('/'),
+      ext = _rawType$split[1];
+    if (ext && ext !== '*') return ext;
+  }
+  if (rawType && rawType !== 'image' && rawType !== 'video' && rawType !== 'audio') {
+    return rawType.replace(/^\./, '');
+  }
+  var match = displayName.match(/\.([^.]+)$/);
+  return match ? match[1].toLowerCase() : '';
+}
+// 优先使用 name；没有 name 时从 src 提取文件名，再兜底为未命名。
+export function getMediaDisplayName(name, src) {
+  return name || deriveNameFromSrc(src) || _$('未命名文件');
+}
+// 根据显式类型、MIME 或扩展名推断媒体类型，未知类型按图片展示。
+export function resolveMediaType(type, name, src) {
+  var _context2;
+  var rawType = _trimInstanceProperty(_context2 = (type || '').toLowerCase()).call(_context2);
+  if (rawType === 'image' || _startsWithInstanceProperty(rawType).call(rawType, 'image/')) return 'image';
+  if (rawType === 'video' || _startsWithInstanceProperty(rawType).call(rawType, 'video/')) return 'video';
+  if (rawType === 'audio' || _startsWithInstanceProperty(rawType).call(rawType, 'audio/')) return 'audio';
+  var ext = guessExtension(type, getMediaDisplayName(name, src));
+  if (_includesInstanceProperty(IMAGE_EXTENSIONS).call(IMAGE_EXTENSIONS, ext)) return 'image';
+  if (_includesInstanceProperty(VIDEO_EXTENSIONS).call(VIDEO_EXTENSIONS, ext)) return 'video';
+  if (_includesInstanceProperty(AUDIO_EXTENSIONS).call(AUDIO_EXTENSIONS, ext)) return 'audio';
+  return 'image';
+}
+export function isNamedMediaSize(size) {
+  return size === 'mini' || size === 'small' || size === 'default' || size === 'large';
+}
+// 数字尺寸统一转成 px，字符串尺寸保持原样透传。
+export function normalizeMediaLength(value) {
+  if (value === undefined || value === null || value === '') return undefined;
+  if (typeof value === 'number') return value + "px";
+  return value;
+}
+// 提取可计算的像素值，仅识别 number / 纯数字字符串 / px 字符串。
+export function parseMediaPixelLength(value) {
+  if (value === undefined || value === null || value === '') return undefined;
+  if (typeof value === 'number') return _Number$isFinite(value) ? value : undefined;
+  if (typeof value !== 'string') return undefined;
+  var normalized = _trimInstanceProperty(value).call(value);
+  if (!normalized) return undefined;
+  if (/^-?\d+(\.\d+)?$/.test(normalized)) return Number(normalized);
+  var pxMatch = normalized.match(/^(-?\d+(?:\.\d+)?)px$/i);
+  return pxMatch ? Number(pxMatch[1]) : undefined;
+}

package/components/media/styles.d.ts

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

package/components/media/styles.js

@@ -0,0 +1,52 @@
+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: '6px',
+  sizes: {
+    mini: '24px',
+    small: '32px',
+    default: '64px',
+    large: '96px'
+  },
+  placeholderBg: 'linear-gradient(180deg, #F5F7FA 0%, #ECEFF4 100%)',
+  placeholderColor: '#98A0AF',
+  audioCardBg: '#F3F4F6',
+  audioCardTextColor: '#3A3D52',
+  overlayBg: 'rgba(15, 23, 42, 0.42)',
+  errorTextColor: theme.color.danger,
+  loadingSpinnerColor: theme.color.primary,
+  loadingSkeletonBase: '#EEF1F5',
+  loadingSkeletonTo: '#F7F9FC',
+  groupGap: '12px',
+  viewerBg: 'rgba(0, 0, 0, 0.5)',
+  viewerHeaderColor: '#FFFFFF',
+  viewerSubColor: 'rgba(255, 255, 255, 0.72)',
+  viewerActionBg: 'rgba(255, 255, 255, 0.12)',
+  viewerActionHoverBg: 'rgba(255, 255, 255, 0.18)',
+  viewerActionDisabledBg: 'rgba(255, 255, 255, 0.06)',
+  viewerActionColor: '#FFFFFF',
+  viewerAudioBg: '#FFFFFF',
+  viewerAudioTitleColor: '#1F2937',
+  viewerAudioShadow: '0 18px 40px rgba(15, 23, 42, 0.22)'
+};
+var media;
+setDefault(function () {
+  media = deepDefaults(theme, {
+    media: defaults
+  }).media;
+  makeMediaStyles == null || makeMediaStyles.clearCache();
+  makeMediaGroupStyles == null || makeMediaGroupStyles.clearCache();
+  makeMediaViewerStyles == null || makeMediaViewerStyles.clearCache();
+});
+export var makeMediaStyles = cache(function makeMediaStyles(k) {
+  return /*#__PURE__*/css("&.", k, "-media{position:relative;display:inline-flex;flex:0 0 auto;width:", media.sizes.default, ";height:", media.sizes.default, ";vertical-align:top;box-sizing:border-box;}&.", k, "-media.", k, "-media-mini{width:", media.sizes.mini, ";height:", media.sizes.mini, ";}&.", k, "-media.", k, "-media-small{width:", media.sizes.small, ";height:", media.sizes.small, ";}&.", k, "-media.", k, "-media-large{width:", media.sizes.large, ";height:", media.sizes.large, ";}.", k, "-media-shell{position:relative;width:100%;height:100%;overflow:hidden;border-radius:", media.radius, ";background:", media.placeholderBg, ";box-shadow:inset 0 0 0 1px ", setAlpha('#111827', 0.08), ";}&.", k, "-media-loading .", k, "-media-shell{background:linear-gradient(\n                90deg,\n                ", media.loadingSkeletonBase, " 25%,\n                ", media.loadingSkeletonTo, " 37%,\n                ", media.loadingSkeletonBase, " 63%\n            );background-size:400% 100%;animation:", k, "-media-loading-wave 1.4s ease infinite;box-shadow:none;}&.", k, "-media-error .", k, "-media-shell,&.", k, "-media-custom-error .", k, "-media-shell{box-shadow:none;}&.", k, "-media-loading .", k, "-media-shell::before{content:none;}@keyframes ", k, "-media-loading-wave{0%{background-position:100% 50%;}100%{background-position:0 50%;}}.", k, "-media-image,.", k, "-media-video{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;background:#DCE1E9;}&.", k, "-media-loading .", k, "-media-image,&.", k, "-media-loading .", k, "-media-video{background:transparent;}.", k, "-media-audio-loader{display:none;}.", k, "-media-audio-card,.", k, "-media-error-card{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:", media.audioCardBg, ";box-sizing:border-box;}.", k, "-media-card-icon{display:block;width:32px;height:32px;flex:0 0 auto;}.", k, "-media-name-tooltip-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.", k, "-media-name-tooltip-trigger{position:absolute;inset:0;z-index:2;outline:none;}&.", k, "-media.", k, "-media-mini .", k, "-media-card-icon{width:24px;height:24px;}&.", k, "-media-loading .", k, "-media-audio-card,.", k, "-media-error-card{background:transparent;}.", k, "-media-placeholder{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:", media.placeholderBg, ";color:", media.placeholderColor, ";}.", k, "-media-placeholder .", k, "-icon{font-size:20px;}&.", k, "-media-loading .", k, "-media-placeholder{background:transparent;}&.", k, "-media-mini .", k, "-media-placeholder .", k, "-icon,&.", k, "-media-small .", k, "-media-placeholder .", k, "-icon{font-size:16px;}.", k, "-media-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:", media.overlayBg, ";opacity:0;pointer-events:none;transition:opacity ", theme.transition.middle, ";}.", k, "-media-preview-trigger,&.", k, "-media-custom-mask .", k, "-media-overlay{pointer-events:auto;}.", k, "-media-video-preview-trigger{position:absolute;inset:0;z-index:4;width:24px;height:24px;margin:auto;pointer-events:auto;}.", k, "-media-loading-indicator{position:absolute;top:3px;left:3px;z-index:3;display:flex;align-items:center;justify-content:center;width:14px;height:14px;pointer-events:none;}.", k, "-media-loading-spinner{width:12px;height:12px;border:1.5px solid ", setAlpha(media.loadingSpinnerColor, 0.22), ";border-top-color:", media.loadingSpinnerColor, ";border-radius:50%;box-sizing:border-box;animation:", k, "-media-loading-spinner 0.8s linear infinite;}@keyframes ", k, "-media-loading-spinner{100%{transform:rotate(360deg);}}.", k, "-media-state-layer{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;box-sizing:border-box;}.", k, "-media-preview-trigger{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;padding:0;border:none;border-radius:0;background:transparent;color:#FFFFFF;cursor:pointer;transition:opacity ", theme.transition.middle, ";}.", k, "-media-preview-trigger:focus{outline:none;}.", k, "-media-preview-trigger .", k, "-icon,.", k, "-media-preview-trigger.ion{font-size:18px;}&.", k, "-media-mini .", k, "-media-preview-trigger .", k, "-icon,&.", k, "-media-small .", k, "-media-preview-trigger .", k, "-icon,&.", k, "-media-mini .", k, "-media-preview-trigger.ion,&.", k, "-media-small .", k, "-media-preview-trigger.ion{font-size:14px;}&.", k, "-media-mini .", k, "-media-video-preview-trigger,&.", k, "-media-small .", k, "-media-video-preview-trigger{width:18px;height:18px;}.", k, "-media-preview-trigger:hover:not(:disabled){background:transparent;}.", k, "-media-preview-trigger:disabled{opacity:0.5;cursor:not-allowed;}&.", k, "-media-mini .", k, "-media-loading-spinner,&.", k, "-media-small .", k, "-media-loading-spinner{width:10px;height:10px;border-width:1px;}&.", k, "-media-mini .", k, "-media-loading-indicator,&.", k, "-media-small .", k, "-media-loading-indicator{top:4px;left:4px;width:10px;height:10px;}&.", k, "-media-previewable:hover .", k, "-media-overlay{opacity:1;}&.", k, "-media-custom-mask:hover .", k, "-media-overlay{opacity:1;}&.", k, "-media-video-play-visible:hover .", k, "-media-overlay{opacity:1;}.", k, "-media-preview-icon.", k, "-icon,.", k, "-media-preview-icon.ion{color:inherit;}");
+});
+export var makeMediaGroupStyles = cache(function makeMediaGroupStyles(k) {
+  return /*#__PURE__*/css("&.", k, "-media-group{display:inline-flex;flex-wrap:wrap;gap:", media.groupGap, ";align-items:flex-start;max-width:100%;}");
+});
+export var makeMediaViewerStyles = cache(function makeMediaViewerStyles(k) {
+  return /*#__PURE__*/css("&.", k, "-media-viewer{position:fixed;inset:0;z-index:", theme.maxZIndex, ";display:flex;align-items:center;justify-content:center;background:", media.viewerBg, ";backdrop-filter:blur(2px);}&.", k, "-media-viewer.k-fade-enter-active,&.", k, "-media-viewer.k-fade-leave-active{.", k, "-media-viewer-header,.", k, "-media-viewer-prev,.", k, "-media-viewer-next,.", k, "-media-viewer-stage{transition:transform ", theme.transition.large, ",opacity ", theme.transition.large, ";}}&.", k, "-media-viewer.k-fade-enter-from,&.", k, "-media-viewer.k-fade-leave-to{.", k, "-media-viewer-header{opacity:0;transform:translateY(-8px);}.", k, "-media-viewer-prev{opacity:0;transform:translate(-8px, -50%);}.", k, "-media-viewer-next{opacity:0;transform:translate(8px, -50%);}.", k, "-media-viewer-stage{opacity:0;transform:translateY(12px) scale(0.96);}}&.", k, "-media-viewer .", k, "-media-viewer-header{position:absolute;top:24px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;z-index:1;}&.", k, "-media-viewer .", k, "-media-viewer-heading{min-width:0;}&.", k, "-media-viewer .", k, "-media-viewer-title{color:", media.viewerHeaderColor, ";font-size:16px;line-height:24px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}&.", k, "-media-viewer .", k, "-media-viewer-counter{margin-top:4px;color:", media.viewerSubColor, ";font-size:12px;line-height:18px;}&.", k, "-media-viewer .", k, "-media-viewer-close,&.", k, "-media-viewer .", k, "-media-viewer-prev,&.", k, "-media-viewer .", k, "-media-viewer-next{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:50%;background:", media.viewerActionBg, ";color:", media.viewerActionColor, ";line-height:1;cursor:pointer;transition:background ", theme.transition.middle, ",transform ", theme.transition.middle, ";}&.", k, "-media-viewer .", k, "-media-viewer-close:hover,&.", k, "-media-viewer .", k, "-media-viewer-prev:hover:not(:disabled),&.", k, "-media-viewer .", k, "-media-viewer-next:hover:not(:disabled){background:", media.viewerActionHoverBg, ";transform:scale(1.04);}&.", k, "-media-viewer .", k, "-media-viewer-prev:disabled,&.", k, "-media-viewer .", k, "-media-viewer-next:disabled{background:", media.viewerActionDisabledBg, ";opacity:0.45;cursor:not-allowed;}&.", k, "-media-viewer .", k, "-media-viewer-prev,&.", k, "-media-viewer .", k, "-media-viewer-next{position:absolute;top:50%;margin-top:-20px;z-index:1;}&.", k, "-media-viewer .", k, "-media-viewer-close .", k, "-icon{color:#FFFFFF;font-size:20px;}&.", k, "-media-viewer .", k, "-media-viewer-prev .", k, "-icon,&.", k, "-media-viewer .", k, "-media-viewer-next .", k, "-icon{color:#FFFFFF;font-size:20px;font-weight:600;}&.", k, "-media-viewer .", k, "-media-viewer-prev{left:24px;}&.", k, "-media-viewer .", k, "-media-viewer-next{right:24px;}&.", k, "-media-viewer .", k, "-media-viewer-stage{display:flex;align-items:center;justify-content:center;width:min(88vw, 1120px);max-width:100%;max-height:calc(100vh - 120px);padding:72px 80px;box-sizing:border-box;}&.", k, "-media-viewer .", k, "-media-viewer-image,&.", k, "-media-viewer .", k, "-media-viewer-video{display:block;max-width:100%;max-height:calc(100vh - 144px);object-fit:contain;}&.", k, "-media-viewer .", k, "-media-viewer-video{background:#000000;}&.", k, "-media-viewer .", k, "-media-viewer-audio{width:min(480px, 100%);padding:28px;border-radius:20px;background:", media.viewerAudioBg, ";box-shadow:", media.viewerAudioShadow, ";box-sizing:border-box;text-align:center;}&.", k, "-media-viewer .", k, "-media-viewer-audio-cover{display:inline-flex;align-items:center;justify-content:center;width:96px;height:96px;margin-bottom:20px;border-radius:50%;background:", theme.color.bg, ";color:", theme.color.primary, ";}&.", k, "-media-viewer .", k, "-media-viewer-audio-cover-image{display:block;width:40px;height:40px;}&.", k, "-media-viewer .", k, "-media-viewer-audio-title{margin-bottom:16px;color:", media.viewerAudioTitleColor, ";font-size:16px;line-height:24px;font-weight:500;word-break:break-word;}&.", k, "-media-viewer .", k, "-media-viewer-audio-player{width:100%;}@media (max-width: 768px){&.", k, "-media-viewer .", k, "-media-viewer-header{top:16px;left:16px;right:16px;}&.", k, "-media-viewer .", k, "-media-viewer-stage{width:100%;padding:72px 16px 24px;}&.", k, "-media-viewer .", k, "-media-viewer-prev,&.", k, "-media-viewer .", k, "-media-viewer-next{bottom:24px;top:auto;margin-top:0;}&.", k, "-media-viewer .", k, "-media-viewer-prev{left:16px;}&.", k, "-media-viewer .", k, "-media-viewer-next{right:16px;}}");
+});

package/components/media/types.d.ts

@@ -0,0 +1,37 @@
+import type { Media } from './media';
+export type MediaType = 'image' | 'video' | 'audio' | string;
+export type ResolvedMediaType = 'image' | 'video' | 'audio';
+export type MediaSize = 'mini' | 'small' | 'default' | 'large';
+export type MediaStatus = 'default' | 'loading' | 'error' | 'done';
+export type MediaNativeProps = Record<string, any>;
+export type MediaSizeValue = MediaSize | string | number;
+export interface MediaValue {
+    name?: string;
+    type?: MediaType;
+    resolvedType: ResolvedMediaType;
+    status: MediaStatus;
+    src?: string;
+    poster?: string;
+    size: MediaSizeValue;
+}
+export interface MediaViewerItem extends MediaValue {
+    name: string;
+}
+export interface MediaMaskValue extends MediaValue {
+    canPreview: boolean;
+    preview: (event: any) => void;
+}
+export interface MediaBlocks {
+    loading: MediaValue;
+    error: MediaValue;
+    mask: MediaMaskValue;
+}
+export interface MediaGroupItemApi {
+    canPreview: () => boolean;
+    getViewerItem: () => MediaViewerItem;
+}
+export interface MediaGroupContextValue {
+    register: (media: Media, api: MediaGroupItemApi) => void;
+    unregister: (media: Media) => void;
+    open: (media: Media) => void;
+}

package/components/media/types.js

@@ -0,0 +1 @@
+export {};

package/components/media/useMedia.d.ts

@@ -0,0 +1,70 @@
+import type { MediaMaskValue, MediaStatus, MediaViewerItem, MediaValue } from './types';
+export declare function useMedia(): {
+    getRootClassNameObj: () => {
+        [x: string]: boolean;
+    };
+    getRootStyle: () => Record<string, string | undefined>;
+    getFileName: () => string;
+    getValue: () => MediaValue;
+    getViewerItem: () => MediaViewerItem;
+    getMaskValue: () => MediaMaskValue;
+    getDisplayStatus: () => MediaStatus;
+    isLoading: () => boolean;
+    isError: () => boolean;
+    isDone: () => boolean;
+    shouldShowLoadingIndicator: () => boolean;
+    shouldShowImage: () => boolean;
+    shouldShowVideo: () => boolean;
+    shouldShowPlaceholder: () => boolean;
+    shouldShowAudioLoader: () => boolean;
+    shouldShowAudioCard: () => boolean;
+    shouldShowErrorCard: () => boolean;
+    imageRef: import('intact-vue-next').RefObject<HTMLImageElement>;
+    videoRef: import('intact-vue-next').RefObject<HTMLVideoElement>;
+    audioRef: import('intact-vue-next').RefObject<HTMLAudioElement>;
+    getImageProps: () => {
+        alt: string;
+        src: string;
+        draggable: boolean;
+        'ev-load': (e: Event) => void;
+        'ev-error': (e: Event) => void;
+    };
+    getVideoProps: () => {
+        src: string;
+        poster: string | undefined;
+        'ev-loadedmetadata': (e: Event) => void;
+        'ev-loadeddata': (e: Event) => void;
+        'ev-canplay': (e: Event) => void;
+        'ev-error': (e: Event) => void;
+        preload: string;
+        muted: boolean;
+        playsinline: boolean;
+        controls: boolean;
+        tabindex: number;
+    };
+    getVideoKey: () => string;
+    getAudioLoaderProps: () => {
+        src: string;
+        'ev-loadedmetadata': (e: Event) => void;
+        'ev-error': (e: Event) => void;
+        preload: string;
+    };
+    getAudioCardAssetSrc: () => string;
+    getErrorCardAssetSrc: () => string;
+    getMediaCardIconStyle: () => {
+        width: string;
+        height: string;
+    } | undefined;
+    getPreviewIconClassName: () => "ion-ios-eye-outline" | "ion-ios-play";
+    getPlaceholderIconClassName: () => "ion-videocamera" | "ion-ios-musical-note" | "ion-image";
+    getPreviewTitle: () => "播放视频" | "播放音频" | "查看图片";
+    onClick: (e: MouseEvent) => void;
+    onPreview: (e: any) => void;
+    canPreview: () => boolean;
+    shouldShowVideoPlayTrigger: () => boolean;
+    shouldShowMaskLayer: () => boolean;
+    isStandalonePreviewRendered: () => boolean;
+    isStandalonePreviewVisible: () => boolean;
+    closeStandalonePreview: () => void;
+    afterStandalonePreviewClose: () => void;
+};