plain-design 1.0.0-beta.12 → 1.0.0-beta.120

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.12",
+  "version": "1.0.0-beta.120",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
   "typings": "src/index.ts",
   "files": [
     "dist",
-    "src"
+    "src/packages",
+    "src/index.ts"
   ],
   "scripts": {
+    "local": "cross-env APP_ENV=local vue-cli-service serve",
     "dev": "cross-env APP_ENV=prod vue-cli-service serve",
     "build": "cross-env APP_ENV=prod vue-cli-service build",
     "release": "cross-env NODE_ENV=production webpack --config ./build/webpack.release.js --progress"
@@ -17,9 +19,9 @@
   "author": "",
   "license": "ISC",
   "peerDependencies": {
+    "@peryl/react-compose": "0.0.202",
     "exceljs": "^4.2.1",
     "file-saver": "^2.0.5",
-    "plain-design-composition": "^0.0.167",
     "react": "^18.0.1",
     "react-dom": "^18.0.1"
   },
@@ -28,63 +30,63 @@
     "@types/react-dom": "18.2.4"
   },
   "dependencies": {
-    "@types/color": "^3.0.3",
-    "@types/react-transition-group": "^4.4.1",
-    "color": "^4.2.3",
-    "dayjs": "^1.10.4",
-    "plain-icons": "0.0.7",
-    "plain-utils": "^0.1.48",
-    "react-flip-move": "^3.0.4",
-    "react-transition-group": "^4.4.1"
+    "@peryl/icon": "0.0.8",
+    "@peryl/utils": "^0.1.71",
+    "@types/color": "3.0.6",
+    "@types/react-transition-group": "4.4.10",
+    "color": "4.2.3",
+    "dayjs": "1.11.10",
+    "react-flip-move": "3.0.5",
+    "react-transition-group": "4.4.5"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/plugin-transform-class-properties": "^7.22.3",
-    "@babel/preset-env": "^7.13.15",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/preset-typescript": "^7.13.0",
+    "@peryl/react-compose": "0.0.219",
+    "@babel/plugin-proposal-optional-chaining": "7.21.0",
+    "@babel/plugin-transform-class-properties": "7.23.3",
+    "@babel/preset-env": "7.23.7",
+    "@babel/preset-react": "7.23.3",
+    "@babel/preset-typescript": "7.23.3",
     "@types/classnames": "^2.2.11",
     "@types/react": "18.2.4",
     "@types/react-dom": "18.2.4",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.2.21",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
+    "@vue/cli-plugin-babel": "4.5.19",
+    "@vue/cli-plugin-eslint": "4.5.19",
+    "@vue/cli-plugin-typescript": "4.5.19",
+    "@vue/cli-service": "4.5.19",
+    "@vue/compiler-sfc": "3.4.3",
     "@vue/eslint-config-typescript": "^7.0.0",
-    "autoprefixer": "^8.6.5",
-    "axios": "^0.21.1",
-    "babel-plugin-import": "^1.13.3",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "core-js": "^3.8.3",
+    "autoprefixer": "8.6.5",
+    "axios": "1.6.8",
+    "babel-plugin-import": "1.13.8",
+    "babel-plugin-syntax-jsx": "6.18.0",
+    "core-js": "3.35.0",
     "cross-env": "^7.0.3",
     "css-loader": "3.6.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0",
+    "eslint": "6.8.0",
+    "eslint-plugin-vue": "7.20.0",
     "exceljs": "^4.2.1",
     "file-saver": "^2.0.5",
-    "fork-ts-checker-webpack-plugin": "^6.2.4",
-    "mini-css-extract-plugin": "^1.4.1",
+    "fork-ts-checker-webpack-plugin": "6.5.3",
+    "mini-css-extract-plugin": "1.6.2",
     "mockjs": "^1.1.0",
-    "plain-design-composition": "^0.0.167",
-    "postcss": "^8.2.13",
-    "postcss-loader": "^4.2.0",
-    "qs": "^6.10.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "sass": "~1.32.13",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^2.0.0",
-    "ts-loader": "^9.4.2",
-    "ts-node": "^9.1.1",
-    "tslib": "^2.5.0",
+    "postcss": "8.4.32",
+    "postcss-loader": "4.3.0",
+    "qs": "6.11.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "sass": "1.32.13",
+    "sass-loader": "8.0.2",
+    "style-loader": "2.0.0",
+    "ts-loader": "9.5.1",
+    "ts-node": "9.1.1",
+    "tslib": "2.6.2",
     "typescript": "^4.9.5",
-    "url-loader": "^4.1.1",
-    "vue": "^3.2.21",
-    "vue-template-compiler": "^2.6.12",
+    "url-loader": "4.1.1",
+    "vue": "3.4.3",
+    "vue-template-compiler": "2.7.16",
     "webpack-bundle-analyzer": "^4.4.1",
-    "webpack-cli": "^4.6.0"
+    "webpack-cli": "4.10.0"
   }
 }

package/src/packages/build.ts

@@ -1,15 +1,7 @@
 import Plain from './index';
-// @ts-ignore
-import allIcons from 'plain-icons/dist/icons.js';
+import {installAllIcon} from "./utils/installAllIcons";
 
-// @ts-ignore
-Plain.Icon.PlainIcon.use.options.props.getIcon.default = (icon: string) => {
-  const iconMeta = (allIcons as any)[icon];
-  if (!iconMeta) {
-    throw new Error(`getIcon: can't find icon match ${icon}`);
-  }
-  return iconMeta;
-};
+installAllIcon();
 
 export * from './index';
 export default Plain;

package/src/packages/components/$address/createAddressService.tsx

@@ -1,6 +1,8 @@
 import {eAddressTypeEnum, iAddressLazyMeta, iAddressSyncMeta} from "./address.utils";
-import {defer, DFD} from "plain-utils/utils/defer";
-import {reactive} from "plain-design-composition";
+import {defer, DFD} from "@peryl/utils/defer";
+import {reactive} from "@peryl/react-compose";
+import i18n from "../i18n";
+import {createEffects} from "@peryl/utils/createEffects";
 
 export function createAddressService(
   config: {
@@ -34,6 +36,7 @@ export function createAddressService(
   }
 ) {
 
+  const { effects } = createEffects();
   /**
    * 带缓存地通过code查询地址信息
    * @author  韦胜健
@@ -126,13 +129,14 @@ export function createAddressService(
     };
   })();
 
+  let dfd: DFD<iAddressSyncMeta[]> | null = null;
+
   /**
    * 带缓存地查询所有地址数据
    * @author  韦胜健
    * @date    2022.12.16 23:20
    */
   const getAddress = (() => {
-    let dfd: DFD<iAddressSyncMeta[]> | null = null;
     return () => {
       if (!dfd) {
         dfd = defer<iAddressSyncMeta[]>();
@@ -142,6 +146,15 @@ export function createAddressService(
     };
   })();
 
+  /**
+   * 清理缓存
+   * @author  韦胜健
+   * @date    2024.6.18 15:34
+   */
+  const clear = () => {
+    dfd = null;
+  };
+
   const getAddressByCodesComputed = (() => {
 
     const state = reactive({
@@ -171,6 +184,15 @@ export function createAddressService(
     return getter;
   })();
 
+  /**
+   * 切换多语言的时候清理缓存
+   * @author  韦胜健
+   * @date    2024.6.18 15:35
+   */
+  effects.push(
+    i18n.hooks.onChangeLang.use(() => clear())
+  );
+
   return {
     config,
     getAddressByLabel,
@@ -178,6 +200,8 @@ export function createAddressService(
     getAddressByParentCodes,
     getAddress,
     getAddressByCodesComputed,
+    clear,
+    dispose: effects.clear,
   };
 }
 

package/src/packages/components/$configuration/index.tsx

@@ -1,4 +1,4 @@
-import {createHooks, inject} from "plain-design-composition";
+import {anonymousEffects, createHooks, inject} from "@peryl/react-compose";
 import {iUploadService} from "../$upload/createUploadService";
 import {iHttp} from "../createHttp";
 import {iAddressService} from "../$address/createAddressService";
@@ -22,7 +22,7 @@ export interface iConfiguration {
  * @author  韦胜健
  * @date    2022/7/13 10:56
  */
-export const onInitializeConfigurationHook = createHooks<(configuration: iConfiguration) => void>();
+export const onInitializeConfigurationHook = createHooks<(configuration: iConfiguration) => void>(anonymousEffects);
 
 export const $configuration = (() => {
   let _configuration: iConfiguration;

package/src/packages/components/$file/index.tsx

@@ -1,4 +1,4 @@
-import {defer} from "plain-utils/utils/defer";
+import {defer} from "@peryl/utils/defer";
 import {$message} from "../$message";
 import i18n from "../i18n";
 
@@ -76,7 +76,7 @@ export function createFileService() {
         if (!!config!.validator && !config!.validator(file)) return;
         if (!!config!.max && file.calcSize > config!.max) {
           return $message.error(
-            i18n('file.oversize', { filename: file.name, filesize: file.calcSize, max: config!.max }).d(`[${file.name}]大小为${file.calcSize}MB，超过最大限制${config!.max}MB`),
+            i18n.$it('file.oversize', { filename: file.name, filesize: file.calcSize, max: config!.max }).d(`[${file.name}]大小为${file.calcSize}MB，超过最大限制${config!.max}MB`),
             { time: 5000 });
         }
         files.push(file);

package/src/packages/components/$loading/index.tsx

@@ -0,0 +1,3 @@
+import useLoading from "../useLoading";
+
+export const $loading = useLoading().$loading;

package/src/packages/components/$message/image.service.utils.tsx

@@ -3,7 +3,7 @@
  * @author  韦胜健
  * @date    2021/1/21 11:46
  */
-import {defer} from "plain-utils/utils/defer";
+import {defer} from "@peryl/utils/defer";
 import $file from "../$file";
 import i18n from "../i18n";
 
@@ -149,11 +149,11 @@ export const imageCompress = (() => {
     }*/
     let image = await urlToImage(url);
     if (!!config.maxHeight || !!config.maxWidth) {
-      let file = await compressByMeasure(image, config, `${i18n('image.compressByImageMeasure').d('根据尺寸压缩图片')}.png`);
+      let file = await compressByMeasure(image, config, `${i18n.$it('image.compressByImageMeasure').d('根据尺寸压缩图片')}.png`);
       return !file ? null : fileToDataURL(file);
     }
     if (!!config.maxSize) {
-      let file = await compressByMaxSize(image, config.maxSize, `${i18n('image.compressByImageCapacity').d('根据大小压缩图片')}.png`);
+      let file = await compressByMaxSize(image, config.maxSize, `${i18n.$it('image.compressByImageCapacity').d('根据大小压缩图片')}.png`);
       return !file ? null : fileToDataURL(file);
     }
     throw new Error('compress: maxSize, maxHeight, maxWidth is empty!');

package/src/packages/components/$object/createObjectService.tsx

@@ -1,15 +1,15 @@
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {iObjectServiceDefaultConfig, iObjectServicePickConfig, iObjectServicePickMultipleConfig, iObjectServicePickSingleConfig} from "./object.service.utils";
 import {$dialog} from "../$dialog";
 import {AutoTable} from "../AutoTable";
 import {PlcCheck} from "../Table/standard/PlcCheck/PlcCheck";
-import {reactive} from "plain-design-composition";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {getComponentCls, reactive} from "@peryl/react-compose";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import {convertRowToSelected, convertSelectedToRow} from "./object.conver";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {defer} from "plain-utils/utils/defer";
+import {createEffects} from "@peryl/utils/createEffects";
+import {defer} from "@peryl/utils/defer";
 import {$message} from "../$message";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {getTableRowHeight} from "../Table/table/utils/table.utils";
 import {iDialogServiceOption} from "../useDialog/dialog.service.utils";
 import {TableOptionSpace} from "../AutoTable/utils/TableOption.space";
@@ -19,23 +19,28 @@ import {ClientZoom} from "../../utils/ClientZoom";
 export function createObjectService(defaultConfig: iObjectServiceDefaultConfig) {
 
   const publicDialogOption: iDialogServiceOption = {
-    title: i18n('base.selectData').d('选择数据'),
+    headAlign: 'left',
+    title: i18n.$it('base.selectData').d('选择数据'),
     confirmButton: true,
     cancelButton: true,
+    noContentPadding: true,
     maxHeight: ' ',
-    maxWidth: '60vw',
+    maxWidth: ' ',
+    width: '50vw'
   };
 
   function processShowRows(option: TableOptionSpace.iTableOption) {
-    const { clientHeight } = ClientZoom.getClientSize();
-    const availableHeight = clientHeight * 0.8 - 48 - 44 - 40 - 40 - 28;
-    const { bodyRowHeight } = getTableRowHeight(option.config.size, option.config);
-    const showRows = Math.floor(availableHeight / bodyRowHeight) - 1;
-
-    option.config.showRows = showRows;
-    option.pagination.state.size = option.config.showRows;
-    option.pagination.state.pageSizeOptions.indexOf(showRows) === -1 && (option.pagination.state.pageSizeOptions.unshift(showRows));
-    option.fill.state.showRows = showRows;
+    if (option.useConfig.showRows == null) {
+      const { clientHeight } = ClientZoom.getClientSize();
+      const availableHeight = clientHeight * 0.8 - 48 - 44 - 40 - 40 - 28;
+      const { bodyRowHeight } = getTableRowHeight(option.config.size, option.config);
+      const showRows = Math.floor(availableHeight / bodyRowHeight) - 1;
+
+      option.config.showRows = showRows;
+      option.pagination.state.size = option.config.showRows;
+      option.pagination.state.pageSizeOptions.indexOf(showRows) === -1 && (option.pagination.state.pageSizeOptions.unshift(showRows));
+      option.fill.state.showRows = showRows;
+    }
   }
 
   function processPermit(option: TableOptionSpace.iTableOption) {
@@ -78,7 +83,7 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
       handleConfirm: async () => {
         const { selected } = state;
         if (!selected) {
-          $message(i18n('base.selectPieceOfData').d('请选择一条数据'));
+          $message(i18n.$it('base.selectPieceOfData').d('请选择一条数据'));
           return false;
         }
         const flag = config.beforeConfirm?.(selected);
@@ -92,7 +97,7 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
       },
     };
 
-    effects.push(
+    !serviceConfig.readonly && effects.push(
       config.option.hooks.onRenderColumns.use({
         processor: ({ list, render }) => {list.push({ render, key: 'object-check', seq: 0 });},
         render: () => (
@@ -101,16 +106,12 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
       })
     );
 
-    (!config.option.permission.permit.value.show.update || config.option.permission.permit.value.disabled.update) &&
-    effects.push(
-      config.option.hooks.onDblclickRow.use(async () => {
-        await delay();
-        handler.handleConfirm();
-      })
-    );
-
     const close = $dialog({
       ...publicDialogOption,
+      ...serviceConfig.dialogProps,
+      ...serviceConfig.readonly ? { confirmButton: false, cancelButton: false } : {},
+      title: serviceConfig.option.config.title || publicDialogOption.title,
+      externalClass: [serviceConfig.dialogProps?.externalClass, getComponentCls('object-dialog')].filter(Boolean).join(' '),
       onClose: () => {effects.clear();},
       onOpen: () => config.option.methods.pageMethods.reload(),
       handleConfirm: handler.handleConfirm,
@@ -124,6 +125,14 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
       }
     });
 
+    !serviceConfig.readonly && (!config.option.permission.permit.value.show.update || config.option.permission.permit.value.disabled.update) &&
+    effects.push(
+      config.option.hooks.onDblclickRow.use(async () => {
+        await delay();
+        handler.handleConfirm();
+      })
+    );
+
     return dfd.promise;
   }
 
@@ -145,7 +154,7 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
       selected: (!config.selected ? undefined : deepcopy(convertRowToSelected(config.selected, config.map))) as undefined | PlainObject[]
     });
 
-    effects.push(
+    !serviceConfig.readonly && effects.push(
       config.option.hooks.onRenderColumns.use({
         processor: ({ list, render }) => {list.push({ render, key: 'object-check', seq: 0 });},
         render: () => (
@@ -155,13 +164,18 @@ export function createObjectService(defaultConfig: iObjectServiceDefaultConfig)
     );
 
     $dialog({
+      headAlign: 'left',
       ...publicDialogOption,
+      ...serviceConfig.dialogProps,
+      ...serviceConfig.readonly ? { confirmButton: false, cancelButton: false } : {},
+      title: serviceConfig.option.config.title || publicDialogOption.title,
+      externalClass: [serviceConfig.dialogProps?.externalClass, getComponentCls('object-dialog')].filter(Boolean).join(' '),
       onClose: () => {effects.clear();},
       onOpen: () => config.option.methods.pageMethods.reload(),
       handleConfirm: async () => {
         const { selected } = state;
         if (!selected || selected.length === 0) {
-          $message(i18n('base.selectAtLeastOnePieceOfData').d('请至少选择一条数据'));
+          $message(i18n.$it('base.selectAtLeastOnePieceOfData').d('请至少选择一条数据'));
           return false;
         }
         const flag = config.beforeConfirm?.(selected);

package/src/packages/components/$object/object.conver.ts

@@ -1,4 +1,4 @@
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {iObjectServicePickPublicConfig} from "./object.service.utils";
 
 /**

package/src/packages/components/$object/object.service.utils.ts

@@ -1,6 +1,8 @@
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {iObjectConverter} from "./object.conver";
 import {TableOptionSpace} from "../AutoTable/utils/TableOption.space";
+import {ComponentPropsType} from "@peryl/react-compose";
+import {Dialog} from "../Dialog";
 
 /**
  * 创建Object服务需要的默认的配置参数
@@ -17,9 +19,11 @@ export interface iObjectServiceDefaultConfig {
  * @date    2023.1.24 20:14
  */
 export interface iObjectServicePickPublicConfig extends Partial<iObjectServiceDefaultConfig> {
-  option: TableOptionSpace.iTableOption,                                                       // TableOption对象
-  map?: Record<string, string> | [iObjectConverter, iObjectConverter],         // 用来转化选中行与目标行对象的规则
-  beforeCancel?: () => void | boolean | Promise<void | boolean>,              // 取消之前的动作
+  option: TableOptionSpace.iTableOption,                                                        // TableOption对象
+  map?: Record<string, string> | [iObjectConverter, iObjectConverter],                          // 用来转化选中行与目标行对象的规则
+  beforeCancel?: () => void | boolean | Promise<void | boolean>,                                // 取消之前的动作
+  readonly?: boolean,                                                                           // 只读，不需要选择数据，只需要关闭
+  dialogProps?: Partial<ComponentPropsType<typeof Dialog>>                                       // dialog属性
 }
 
 /**

package/src/packages/components/$ov/createOvService.ts

@@ -1,6 +1,6 @@
 import {iOvMeta, iOvServiceConfig} from "./ov.utils";
-import {defer, DFD} from "plain-utils/utils/defer";
-import {reactive} from "plain-design-composition";
+import {defer, DFD} from "@peryl/utils/defer";
+import {reactive} from "@peryl/react-compose";
 
 export function createOvService(
   config: iOvServiceConfig

package/src/packages/components/$previewer/ImagePreviewerFixedContainer.tsx

@@ -0,0 +1,108 @@
+import {designComponent, getComponentCls, iHTMLDivElement, nextIndex, onBeforeUnmount, onMounted, PropType, reactive, useClasses, useRefs, useStyles} from "@peryl/react-compose";
+import {getCenterRect, iImagePreviewerOption, ImagePreviewerHooks} from "../ImagePreviewer/image-previewer.utils";
+import {ImagePreviewer} from "../ImagePreviewer";
+import {getRectAutoFormat} from "@peryl/utils/getRectAutoFormat";
+import {unit} from "@peryl/utils/unit";
+import {createEffects} from "@peryl/utils/createEffects";
+import {addElementListener} from "@peryl/utils/addElementListener";
+import {delay} from "@peryl/utils/delay";
+import './image-previewer-fixed-container.scss';
+
+export const ImagePreviewerFixedContainer = designComponent({
+  name: 'image-previewer-fixed-container',
+  props: {
+    option: { type: Object as PropType<iImagePreviewerOption>, required: true }
+  },
+  setup({ props }) {
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
+
+    const state = reactive({
+      ready: false,
+    });
+
+    const classes = useClasses(() => [
+      getComponentCls('image-previewer-fixed-container')
+    ]);
+
+    const styles = useStyles(style => {style.zIndex = nextIndex();});
+
+    const { effects: setupEffects } = createEffects();
+
+    onMounted(async () => {
+      const containerWidth = Math.floor(refs.el!.offsetWidth);
+      const containerHeight = Math.floor(refs.el!.offsetHeight - props.option.galleryHeight - props.option.separatorHeight);
+      const containerRatio = Number((containerWidth / containerHeight).toFixed(1));
+
+      const imageElement = props.option.imageElement;
+
+      if (!imageElement) {
+        state.ready = true;
+        return;
+      }
+      /**
+       * 如果原始imageElement存在，则创建一个影子图片元素展示过度动画
+       * @author  韦胜健
+       * @date    2024/1/5 11:22
+       */
+      const shadowImageElement = imageElement.cloneNode(true) as HTMLImageElement;
+      const imageElementRect = getRectAutoFormat(imageElement);
+      props.option.oldSourceImageOpacity = imageElement.style.opacity;
+      imageElement.style.opacity = "0";
+
+      shadowImageElement.style.position = 'fixed';
+      shadowImageElement.style.top = unit(imageElementRect.top)!;
+      shadowImageElement.style.left = unit(imageElementRect.left)!;
+      shadowImageElement.style.width = unit(imageElementRect.width)!;
+      shadowImageElement.style.height = unit(imageElementRect.height)!;
+      shadowImageElement.style.transition = 'all ease 300ms';
+      shadowImageElement.style.zIndex = '999999';
+      shadowImageElement.style.objectFit = window.getComputedStyle(imageElement).objectFit
+
+      /*开启动画时阻止页面滚动*/
+      setupEffects.push(
+        addElementListener(shadowImageElement, 'wheel', e => {
+          e.preventDefault();
+          e.stopPropagation();
+        })
+      );
+
+      const newRect = getCenterRect({ containerElement: { containerHeight, containerWidth, containerRatio }, imageElement });
+
+      document.body.appendChild(shadowImageElement);
+      setupEffects.push(() => {document.body.removeChild(shadowImageElement);});
+      await delay();
+      shadowImageElement.style.top = unit(newRect.top.toFixed(0))!;
+      shadowImageElement.style.left = unit(newRect.left.toFixed(0))!;
+      shadowImageElement.style.height = unit(newRect.height.toFixed(0))!;
+      shadowImageElement.style.width = unit(newRect.width.toFixed(0))!;
+      const clearListener = addElementListener(shadowImageElement, 'transitionend', () => {
+        state.ready = true;
+        const clearHook = ImagePreviewerHooks.onImagePreviewerReady.use(async (data) => {
+          if (data.option.id !== props.option.id) {
+            return;
+          }
+          await delay();
+          clearHook();
+          setupEffects.clear();
+        });
+        setupEffects.push(clearHook);
+      });
+      setupEffects.push(clearListener);
+    });
+
+    onBeforeUnmount(setupEffects.clear);
+
+    return () => (
+      <div className={classes.value} ref={onRef.el}>
+        {state.ready && (
+          <ImagePreviewer
+            closable
+            option={props.option}
+            style={styles.value}
+          />
+        )}
+      </div>
+    );
+  },
+});

package/src/packages/components/$previewer/image-previewer-fixed-container.scss

@@ -0,0 +1,18 @@
+@include comp(image-previewer-fixed-container) {
+  position: fixed;
+  inset: 0;
+
+  @include comp(carousel) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+  }
+
+  .image-previewer-component-gallery {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}