musae 1.0.23 → 1.0.25

package/dist/components/image/image.cjs

@@ -25,6 +25,8 @@ var styles = {
     "default": {
       k1xSpc: "musaex-3nfvp2",
       kVAEAm: "musaex-1n2onr6",
+      kjj79g: "musaex-l56j7k",
+      kGNEyG: "musaex-6s0dn4",
       $$css: true
     }
   },
@@ -56,7 +58,8 @@ var styles = {
   img: {
     "default": {
       kzqmXN: "musaex-92755x",
-      kZKoxP: "musaex-kyvkcq",
+      kskxy: "musaex-15q9lfd",
+      kVIFPx: "musaex-l1xv1r",
       $$css: true
     }
   }
@@ -98,10 +101,10 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     referrerPolicy: referrerPolicy
   });
   var actions = React.useMemo(function () {
-    return new Set([].concat(_toConsumableArray(previewable && src ? ["preview"] : []), _toConsumableArray(onRemove ? ["remove"] : [])));
-  }, [previewable, src, onRemove]);
+    return new Set([].concat(_toConsumableArray(previewable && status === "loaded" ? ["preview"] : []), _toConsumableArray(onRemove ? ["remove"] : [])));
+  }, [previewable, onRemove, status]);
   var preview$1 = relax.useEvent(function () {
-    if (!src) return;
+    if (!src || status !== "loaded") return;
     // if current image is in preview group
     // just use preview group to preview image
     if (contextValue) {
@@ -118,8 +121,8 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     img: stylex.props(styles.img["default"])
   };
   React.useImperativeHandle(ref, function () {
-    if (!imageRef.current) return {};
-    return _objectSpread(_objectSpread({}, imageRef.current), {}, {
+    var _imageRef$current;
+    return _objectSpread(_objectSpread({}, (_imageRef$current = imageRef.current) !== null && _imageRef$current !== void 0 ? _imageRef$current : {}), {}, {
       preview: preview$1
     });
   });
@@ -132,18 +135,6 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       })
     });
   }
-  if (status !== "loaded") {
-    if (relax.isUndefined(fallback)) {
-      return /*#__PURE__*/React.createElement(empty.default, {
-        className: className$1,
-        style: {
-          width: width,
-          height: height
-        }
-      });
-    }
-    return fallback;
-  }
   return /*#__PURE__*/React.createElement("div", _objectSpread({
     className: className.stringify(classNames.image, className$1, styled.image.className),
     style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, styled.image.style), style), themeColorVars), {}, {
@@ -151,7 +142,7 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       height: height
     }),
     ref: imageRef
-  }, hoverProps), /*#__PURE__*/React.createElement("img", {
+  }, hoverProps), status === "loaded" && (/*#__PURE__*/React.createElement("img", {
     ref: imgRef,
     className: className.stringify(classNames.img, styled.img.className),
     style: styled.img.style,
@@ -160,7 +151,9 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     draggable: false,
     crossOrigin: crossOrigin,
     referrerPolicy: referrerPolicy
-  }), actions.size > 0 && (/*#__PURE__*/React.createElement("div", _objectSpread({
+  })), status !== "loaded" && (fallback !== null && fallback !== void 0 ? fallback : /*#__PURE__*/React.createElement(empty.default, {
+    className: className$1
+  })), actions.size > 0 && (/*#__PURE__*/React.createElement("div", _objectSpread({
     className: className.stringify(classNames.overlay, styled.overlay.className)
   }, actions.size === 1 && actions.has("preview") && {
     onClick: preview$1

package/dist/components/image/image.mjs

@@ -4,7 +4,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { forwardRef, useContext, useRef, useMemo, useImperativeHandle } from 'react';
 import Preview from './preview/preview.mjs';
 import PreviewGroupContext from './preview/context.mjs';
-import { useBoolean, useHover, useImageLoader, useEvent, isUndefined } from '@aiszlab/relax';
+import { useBoolean, useHover, useImageLoader, useEvent } from '@aiszlab/relax';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.16.1/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import Skeleton from '../skeleton/skeleton.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
@@ -21,6 +21,8 @@ var styles = {
     "default": {
       k1xSpc: "musaex-3nfvp2",
       kVAEAm: "musaex-1n2onr6",
+      kjj79g: "musaex-l56j7k",
+      kGNEyG: "musaex-6s0dn4",
       $$css: true
     }
   },
@@ -52,7 +54,8 @@ var styles = {
   img: {
     "default": {
       kzqmXN: "musaex-92755x",
-      kZKoxP: "musaex-kyvkcq",
+      kskxy: "musaex-15q9lfd",
+      kVIFPx: "musaex-l1xv1r",
       $$css: true
     }
   }
@@ -94,10 +97,10 @@ var Image = /*#__PURE__*/forwardRef(function (_ref, ref) {
     referrerPolicy: referrerPolicy
   });
   var actions = useMemo(function () {
-    return new Set([].concat(_toConsumableArray(previewable && src ? ["preview"] : []), _toConsumableArray(onRemove ? ["remove"] : [])));
-  }, [previewable, src, onRemove]);
+    return new Set([].concat(_toConsumableArray(previewable && status === "loaded" ? ["preview"] : []), _toConsumableArray(onRemove ? ["remove"] : [])));
+  }, [previewable, onRemove, status]);
   var preview = useEvent(function () {
-    if (!src) return;
+    if (!src || status !== "loaded") return;
     // if current image is in preview group
     // just use preview group to preview image
     if (contextValue) {
@@ -114,8 +117,8 @@ var Image = /*#__PURE__*/forwardRef(function (_ref, ref) {
     img: props(styles.img["default"])
   };
   useImperativeHandle(ref, function () {
-    if (!imageRef.current) return {};
-    return _objectSpread(_objectSpread({}, imageRef.current), {}, {
+    var _imageRef$current;
+    return _objectSpread(_objectSpread({}, (_imageRef$current = imageRef.current) !== null && _imageRef$current !== void 0 ? _imageRef$current : {}), {}, {
       preview: preview
     });
   });
@@ -128,18 +131,6 @@ var Image = /*#__PURE__*/forwardRef(function (_ref, ref) {
       })
     });
   }
-  if (status !== "loaded") {
-    if (isUndefined(fallback)) {
-      return /*#__PURE__*/React.createElement(Empty, {
-        className: className,
-        style: {
-          width: width,
-          height: height
-        }
-      });
-    }
-    return fallback;
-  }
   return /*#__PURE__*/React.createElement("div", _objectSpread({
     className: stringify(classNames.image, className, styled.image.className),
     style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, styled.image.style), style), themeColorVars), {}, {
@@ -147,7 +138,7 @@ var Image = /*#__PURE__*/forwardRef(function (_ref, ref) {
       height: height
     }),
     ref: imageRef
-  }, hoverProps), /*#__PURE__*/React.createElement("img", {
+  }, hoverProps), status === "loaded" && (/*#__PURE__*/React.createElement("img", {
     ref: imgRef,
     className: stringify(classNames.img, styled.img.className),
     style: styled.img.style,
@@ -156,7 +147,9 @@ var Image = /*#__PURE__*/forwardRef(function (_ref, ref) {
     draggable: false,
     crossOrigin: crossOrigin,
     referrerPolicy: referrerPolicy
-  }), actions.size > 0 && (/*#__PURE__*/React.createElement("div", _objectSpread({
+  })), status !== "loaded" && (fallback !== null && fallback !== void 0 ? fallback : /*#__PURE__*/React.createElement(Empty, {
+    className: className
+  })), actions.size > 0 && (/*#__PURE__*/React.createElement("div", _objectSpread({
     className: stringify(classNames.overlay, styled.overlay.className)
   }, actions.size === 1 && actions.has("preview") && {
     onClick: preview

package/dist/components/upload/uploaded-item/index.cjs

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var React = require('react');
 var stylex = require('../../../node_modules/.pnpm/@stylexjs_stylex@0.16.1/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var relax = require('@aiszlab/relax');
@@ -10,7 +9,6 @@ var path = require('@aiszlab/fuzzy/path');
 var context = require('../context.cjs');
 var className = require('@aiszlab/relax/class-name');
 var theme = require('../../theme/theme.cjs');
-var useThemeColorVars = require('../../../hooks/use-theme-color-vars.cjs');
 var picture = require('./picture.cjs');
 var utils = require('../utils.cjs');
 var loading = require('../../icon/icons/mock/loading.cjs');
@@ -23,15 +21,6 @@ var styles = {
       k1xSpc: "musaex-78zum5",
       kGNEyG: "musaex-6s0dn4",
       kOIVth: "musaex-1wm2zkp",
-      kZKoxP: "musaex-1nrwtz4",
-      $$css: true
-    },
-    picture: {
-      kMzoRj: "musaex-1iyq3db",
-      ksu8eU: "musaex-1y0btm7",
-      kVAM5u: "musaex-axmpxa",
-      kmVPX3: "musaex-17p8e4n",
-      kaIpWk: "musaex-db68te",
       $$css: true
     }
   },
@@ -52,7 +41,6 @@ var UploadedItem = function UploadedItem(_ref) {
   var _useContext = React.useContext(context.Context),
     renderItem = _useContext.renderItem,
     classNames = _useContext.classNames;
-  var themeColorVars = useThemeColorVars.useThemeColorVars(["outline-variant"]);
   var fileItem = React.useMemo(function () {
     if (utils.isRemoteFile(item)) {
       var _item$key;
@@ -67,7 +55,7 @@ var UploadedItem = function UploadedItem(_ref) {
   var isPicture = renderItem === "picture";
   var isLoading = fileItem.status === "loading";
   var styled = {
-    item: stylex.props(styles.item["default"], theme.$body.small, isPicture && styles.item.picture),
+    item: stylex.props(styles.item["default"], theme.$body.small),
     filename: stylex.props(styles.filename["default"])
   };
   var remove = relax.useEvent(function () {
@@ -76,23 +64,22 @@ var UploadedItem = function UploadedItem(_ref) {
   // 加载状态
   if (isLoading) {
     return /*#__PURE__*/React.createElement("div", {
-      className: className.stringify(classNames.uploadedItem, classNames.uploadedItemPicture, styled.item.className),
-      style: _objectSpread(_objectSpread({}, styled.item.style), themeColorVars)
+      className: className.stringify(classNames.uploadedItem, styled.item.className),
+      style: styled.item.style
     }, /*#__PURE__*/React.createElement(loading.default, null));
   }
   // 图片
   if (isPicture) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: className.stringify(classNames.uploadedItem, classNames.uploadedItemPicture, styled.item.className),
-      style: _objectSpread(_objectSpread({}, styled.item.style), themeColorVars)
-    }, /*#__PURE__*/React.createElement(picture.default, {
+    return /*#__PURE__*/React.createElement(picture.default, {
       item: fileItem,
-      onRemove: remove
-    }));
+      onRemove: remove,
+      className: className.stringify(classNames.uploadedItem, styled.item.className),
+      style: styled.item.style
+    });
   }
   return /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.uploadedItem, styled.item.className),
-    style: _objectSpread(_objectSpread({}, styled.item.style), themeColorVars)
+    style: styled.item.style
   }, /*#__PURE__*/React.createElement(attchFile.default, null), /*#__PURE__*/React.createElement("span", {
     className: styled.filename.className,
     style: styled.filename.style

package/dist/components/upload/uploaded-item/index.mjs

@@ -1,4 +1,3 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React, { useContext, useMemo } from 'react';
 import { props } from '../../../node_modules/.pnpm/@stylexjs_stylex@0.16.1/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useEvent } from '@aiszlab/relax';
@@ -6,7 +5,6 @@ import { leaf } from '@aiszlab/fuzzy/path';
 import { Context } from '../context.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 import { $body } from '../../theme/theme.mjs';
-import { useThemeColorVars } from '../../../hooks/use-theme-color-vars.mjs';
 import UploadedPicture from './picture.mjs';
 import { isRemoteFile } from '../utils.mjs';
 import Loading from '../../icon/icons/mock/loading.mjs';
@@ -19,15 +17,6 @@ var styles = {
       k1xSpc: "musaex-78zum5",
       kGNEyG: "musaex-6s0dn4",
       kOIVth: "musaex-1wm2zkp",
-      kZKoxP: "musaex-1nrwtz4",
-      $$css: true
-    },
-    picture: {
-      kMzoRj: "musaex-1iyq3db",
-      ksu8eU: "musaex-1y0btm7",
-      kVAM5u: "musaex-axmpxa",
-      kmVPX3: "musaex-17p8e4n",
-      kaIpWk: "musaex-db68te",
       $$css: true
     }
   },
@@ -48,7 +37,6 @@ var UploadedItem = function UploadedItem(_ref) {
   var _useContext = useContext(Context),
     renderItem = _useContext.renderItem,
     classNames = _useContext.classNames;
-  var themeColorVars = useThemeColorVars(["outline-variant"]);
   var fileItem = useMemo(function () {
     if (isRemoteFile(item)) {
       var _item$key;
@@ -63,7 +51,7 @@ var UploadedItem = function UploadedItem(_ref) {
   var isPicture = renderItem === "picture";
   var isLoading = fileItem.status === "loading";
   var styled = {
-    item: props(styles.item["default"], $body.small, isPicture && styles.item.picture),
+    item: props(styles.item["default"], $body.small),
     filename: props(styles.filename["default"])
   };
   var remove = useEvent(function () {
@@ -72,23 +60,22 @@ var UploadedItem = function UploadedItem(_ref) {
   // 加载状态
   if (isLoading) {
     return /*#__PURE__*/React.createElement("div", {
-      className: stringify(classNames.uploadedItem, classNames.uploadedItemPicture, styled.item.className),
-      style: _objectSpread(_objectSpread({}, styled.item.style), themeColorVars)
+      className: stringify(classNames.uploadedItem, styled.item.className),
+      style: styled.item.style
     }, /*#__PURE__*/React.createElement(Loading, null));
   }
   // 图片
   if (isPicture) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: stringify(classNames.uploadedItem, classNames.uploadedItemPicture, styled.item.className),
-      style: _objectSpread(_objectSpread({}, styled.item.style), themeColorVars)
-    }, /*#__PURE__*/React.createElement(UploadedPicture, {
+    return /*#__PURE__*/React.createElement(UploadedPicture, {
       item: fileItem,
-      onRemove: remove
-    }));
+      onRemove: remove,
+      className: stringify(classNames.uploadedItem, styled.item.className),
+      style: styled.item.style
+    });
   }
   return /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.uploadedItem, styled.item.className),
-    style: _objectSpread(_objectSpread({}, styled.item.style), themeColorVars)
+    style: styled.item.style
   }, /*#__PURE__*/React.createElement(AttachFile, null), /*#__PURE__*/React.createElement("span", {
     className: styled.filename.className,
     style: styled.filename.style

package/dist/components/upload/uploaded-item/picture.cjs

@@ -2,25 +2,47 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var React = require('react');
-var context = require('../../image/context.cjs');
+var context$1 = require('../../image/context.cjs');
 var index = require('../../image/index.cjs');
+var useThemeColorVars = require('../../../hooks/use-theme-color-vars.cjs');
+var className = require('@aiszlab/relax/class-name');
+var context = require('../context.cjs');
 var attchFile = require('../../icon/icons/editor/attch-file.cjs');
 
 var UploadedPicture = function UploadedPicture(_ref) {
   var item = _ref.item,
-    onRemove = _ref.onRemove;
-  return /*#__PURE__*/React.createElement(context.default, {
+    onRemove = _ref.onRemove,
+    className$1 = _ref.className,
+    style = _ref.style;
+  var themeColorVars = useThemeColorVars.useThemeColorVars(["outline-variant"]);
+  var _useContext = React.useContext(context.Context),
+    classNames = _useContext.classNames;
+  var styled = {
+    wrapper: {
+      className: "musaex-1iyq3db musaex-1y0btm7 musaex-axmpxa musaex-db68te musaex-17p8e4n"
+    },
+    image: {
+      className: "musaex-11mck8i musaex-10vnh4r"
+    }
+  };
+  return /*#__PURE__*/React.createElement(context$1.default, {
     value: {
       onRemove: onRemove
     }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.uploadedItemPicture, className$1, styled.wrapper.className),
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.wrapper.style), style), themeColorVars)
   }, /*#__PURE__*/React.createElement(index.Image, {
     src: item.url,
-    fallback: /*#__PURE__*/React.createElement(attchFile.default, null),
+    fallback: /*#__PURE__*/React.createElement(attchFile.default, {
+      size: 48
+    }),
     referrerPolicy: "strict-origin-when-cross-origin",
-    width: "100%",
-    height: "100%"
-  }));
+    className: styled.image.className,
+    style: styled.image.style
+  })));
 };
 
 exports.default = UploadedPicture;

package/dist/components/upload/uploaded-item/picture.d.ts

@@ -1,8 +1,10 @@
-import React from "react";
+import React, { type CSSProperties } from "react";
 import type { UploadedItem } from "../../../types/upload";
 interface Props {
     item: UploadedItem;
     onRemove: () => void;
+    className?: string;
+    style?: CSSProperties;
 }
-declare const UploadedPicture: ({ item, onRemove }: Props) => React.JSX.Element;
+declare const UploadedPicture: ({ item, onRemove, className, style }: Props) => React.JSX.Element;
 export default UploadedPicture;

package/dist/components/upload/uploaded-item/picture.mjs

@@ -1,22 +1,44 @@
-import React from 'react';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import React, { useContext } from 'react';
 import ImageContext from '../../image/context.mjs';
 import { Image } from '../../image/index.mjs';
+import { useThemeColorVars } from '../../../hooks/use-theme-color-vars.mjs';
+import { stringify } from '@aiszlab/relax/class-name';
+import { Context } from '../context.mjs';
 import AttachFile from '../../icon/icons/editor/attch-file.mjs';
 
 var UploadedPicture = function UploadedPicture(_ref) {
   var item = _ref.item,
-    onRemove = _ref.onRemove;
+    onRemove = _ref.onRemove,
+    className = _ref.className,
+    style = _ref.style;
+  var themeColorVars = useThemeColorVars(["outline-variant"]);
+  var _useContext = useContext(Context),
+    classNames = _useContext.classNames;
+  var styled = {
+    wrapper: {
+      className: "musaex-1iyq3db musaex-1y0btm7 musaex-axmpxa musaex-db68te musaex-17p8e4n"
+    },
+    image: {
+      className: "musaex-11mck8i musaex-10vnh4r"
+    }
+  };
   return /*#__PURE__*/React.createElement(ImageContext, {
     value: {
       onRemove: onRemove
     }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.uploadedItemPicture, className, styled.wrapper.className),
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.wrapper.style), style), themeColorVars)
   }, /*#__PURE__*/React.createElement(Image, {
     src: item.url,
-    fallback: /*#__PURE__*/React.createElement(AttachFile, null),
+    fallback: /*#__PURE__*/React.createElement(AttachFile, {
+      size: 48
+    }),
     referrerPolicy: "strict-origin-when-cross-origin",
-    width: "100%",
-    height: "100%"
-  }));
+    className: styled.image.className,
+    style: styled.image.style
+  })));
 };
 
 export { UploadedPicture as default };

package/dist/styles.css

@@ -1828,6 +1828,10 @@
     height: var(--musaex-10wwlfh);
   }
 
+  .musaex-10vnh4r {
+    height: var(--musaex-1113mrb);
+  }
+
   .musaex-11g3na9 {
     height: var(--musaex-12cvltn);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",