plain-design 1.0.0-beta.6 → 1.0.0-beta.60

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

@@ -1,52 +1,56 @@
-import {PlainObject} from "plain-utils/utils/event";
-import {iObjectConverter} from "./object.conver";
-import {TableOptionSpace} from "../AutoTable/utils/TableOption.space";
-
-/**
- * 创建Object服务需要的默认的配置参数
- * @author  韦胜健
- * @date    2023.1.24 20:13
- */
-export interface iObjectServiceDefaultConfig {
-  keyField: string,                                                           // PlcCheck的field，用来判断行是否已经选中
-}
-
-/**
- * 单选多选时的公共类型
- * @author  韦胜健
- * @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>,              // 取消之前的动作
-}
-
-/**
- * 单选时的配置类型
- * @author  韦胜健
- * @date    2023.1.24 20:15
- */
-export interface iObjectServicePickSingleConfig extends iObjectServicePickPublicConfig {
-  multiple?: false,                                                           // 非单选，没有传入multiple或者multiple设置为false
-  beforeConfirm?: (selected: PlainObject) => void | boolean | Promise<void | boolean> // 确认动作执行之前的处理动作
-  selected?: PlainObject,                                                     // 已经选中的单条数据
-}
-
-/**
- * 多选时的配置类型
- * @author  韦胜健
- * @date    2023.1.24 20:16
- */
-export interface iObjectServicePickMultipleConfig extends iObjectServicePickPublicConfig {
-  multiple: true,                                                             // 多选，必须配置multiple为true
-  beforeConfirm?: (selected: PlainObject[]) => void | boolean | Promise<void | boolean> // 确认动作执行之前的处理动作
-  selected?: PlainObject[],                                                   // 已经选中的多条数据
-}
-
-/**
- * 调用object服务的时候的个性化配置参数
- * @author  韦胜健
- * @date    2023.1.24 20:17
- */
-export type iObjectServicePickConfig = (iObjectServicePickSingleConfig | iObjectServicePickMultipleConfig) & { clear?: boolean }
+import {PlainObject} from "plain-utils/utils/event";
+import {iObjectConverter} from "./object.conver";
+import {TableOptionSpace} from "../AutoTable/utils/TableOption.space";
+import {ComponentPropsType} from "plain-design-composition";
+import {Dialog} from "../Dialog";
+
+/**
+ * 创建Object服务需要的默认的配置参数
+ * @author  韦胜健
+ * @date    2023.1.24 20:13
+ */
+export interface iObjectServiceDefaultConfig {
+  keyField: string,                                                           // PlcCheck的field，用来判断行是否已经选中
+}
+
+/**
+ * 单选多选时的公共类型
+ * @author  韦胜健
+ * @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>,                                // 取消之前的动作
+  readonly?: boolean,                                                                           // 只读，不需要选择数据，只需要关闭
+  dialogProps?: Partial<ComponentPropsType<typeof Dialog>>                                       // dialog属性
+}
+
+/**
+ * 单选时的配置类型
+ * @author  韦胜健
+ * @date    2023.1.24 20:15
+ */
+export interface iObjectServicePickSingleConfig extends iObjectServicePickPublicConfig {
+  multiple?: false,                                                           // 非单选，没有传入multiple或者multiple设置为false
+  beforeConfirm?: (selected: PlainObject) => void | boolean | Promise<void | boolean> // 确认动作执行之前的处理动作
+  selected?: PlainObject,                                                     // 已经选中的单条数据
+}
+
+/**
+ * 多选时的配置类型
+ * @author  韦胜健
+ * @date    2023.1.24 20:16
+ */
+export interface iObjectServicePickMultipleConfig extends iObjectServicePickPublicConfig {
+  multiple: true,                                                             // 多选，必须配置multiple为true
+  beforeConfirm?: (selected: PlainObject[]) => void | boolean | Promise<void | boolean> // 确认动作执行之前的处理动作
+  selected?: PlainObject[],                                                   // 已经选中的多条数据
+}
+
+/**
+ * 调用object服务的时候的个性化配置参数
+ * @author  韦胜健
+ * @date    2023.1.24 20:17
+ */
+export type iObjectServicePickConfig = (iObjectServicePickSingleConfig | iObjectServicePickMultipleConfig) & { clear?: boolean }

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

@@ -1,86 +1,86 @@
-import {iOvMeta, iOvServiceConfig} from "./ov.utils";
-import {defer, DFD} from "plain-utils/utils/defer";
-import {reactive} from "plain-design-composition";
-
-export function createOvService(
-  config: iOvServiceConfig
-) {
-
-  const freezeState = {
-    types2dfd: {} as Record<string, DFD<iOvMeta[]>>,
-    types2query: [] as string[],
-  };
-
-  const _getOvByTypes = (() => {
-    let timer: any;
-    const addCode2Query = (code: string): DFD<iOvMeta[]> => {
-      if (!freezeState.types2dfd[code]) {
-        freezeState.types2dfd[code] = defer<iOvMeta[]>();
-        freezeState.types2query.push(code);
-        if (timer != null) {clearTimeout(timer);}
-        timer = setTimeout(async () => {
-          const { types2query } = freezeState;
-          freezeState.types2query = [];
-          const metas = await config.getOvByTypes(types2query);
-          let successCodes = {} as Record<string, true>;
-          types2query.forEach(type => {
-            const typeMetas = metas.filter(i => i.type === type);
-            freezeState.types2dfd[type]!.resolve(typeMetas);
-            successCodes[type] = true;
-          });
-          /*没有查出来的地址代码*/
-          const failTypes = types2query.filter(i => !successCodes[i]);
-          failTypes.forEach(failType => {
-            freezeState.types2dfd[failType]!.reject(`query fail ov type:${failType}`);
-          });
-        }, 0);
-      }
-      return freezeState.types2dfd[code]!;
-    };
-    const query = async (codes: string[]) => Promise.all(codes.map(code => addCode2Query(code).promise));
-    const saveMetas = (metas: iOvMeta[]) => {
-      const type2Metas = metas.reduce((prev, item) => {
-        if (!prev[item.type]) {prev[item.type] = [];}
-        prev[item.type].push(item);
-        return prev;
-      }, {} as Record<string, iOvMeta[]>);
-      Object.entries(type2Metas).forEach(([type, value]) => {
-        freezeState.types2dfd[type] = defer<iOvMeta[]>();
-        freezeState.types2dfd[type].resolve(value);
-      });
-    };
-    return Object.assign(query, { saveMetas, query, freezeState, addCode2Query });
-  })();
-
-  function getOvByTypes(type: string): Promise<iOvMeta[]>
-  function getOvByTypes(types: string[]): Promise<Record<string, iOvMeta[]>>
-  async function getOvByTypes(param: string | string[]): Promise<any> {
-    if (Array.isArray(param)) {
-      const metasList = await _getOvByTypes(param);
-      metasList.reduce((prev, list) => {
-        !!list.length && (prev[list[0].type] = list);
-        return prev;
-      }, {} as Record<string, iOvMeta[]>);
-    } else {
-      const metasList = await _getOvByTypes([param]);
-      return metasList[0];
-    }
-  }
-
-  const state = reactive({
-    type2metas: {} as Record<string, iOvMeta[] | undefined>
-  });
-  const getNameByTypeAndCodeComputed = (type: string, val: string) => {
-    if (!state.type2metas[type]) {
-      getOvByTypes(type).then(val => {!state.type2metas[type] && (state.type2metas[type] = val);});
-      return '...';
-    } else {
-      const find = state.type2metas[type]!.find(i => i.code === val);
-      return find?.name || val;
-    }
-  };
-
-  return { getOvByTypes, getNameByTypeAndCodeComputed };
-}
-
-export type iOvService = ReturnType<typeof createOvService>
+import {iOvMeta, iOvServiceConfig} from "./ov.utils";
+import {defer, DFD} from "plain-utils/utils/defer";
+import {reactive} from "plain-design-composition";
+
+export function createOvService(
+  config: iOvServiceConfig
+) {
+
+  const freezeState = {
+    types2dfd: {} as Record<string, DFD<iOvMeta[]>>,
+    types2query: [] as string[],
+  };
+
+  const _getOvByTypes = (() => {
+    let timer: any;
+    const addCode2Query = (code: string): DFD<iOvMeta[]> => {
+      if (!freezeState.types2dfd[code]) {
+        freezeState.types2dfd[code] = defer<iOvMeta[]>();
+        freezeState.types2query.push(code);
+        if (timer != null) {clearTimeout(timer);}
+        timer = setTimeout(async () => {
+          const { types2query } = freezeState;
+          freezeState.types2query = [];
+          const metas = await config.getOvByTypes(types2query);
+          let successCodes = {} as Record<string, true>;
+          types2query.forEach(type => {
+            const typeMetas = metas.filter(i => i.type === type);
+            freezeState.types2dfd[type]!.resolve(typeMetas);
+            successCodes[type] = true;
+          });
+          /*没有查出来的地址代码*/
+          const failTypes = types2query.filter(i => !successCodes[i]);
+          failTypes.forEach(failType => {
+            freezeState.types2dfd[failType]!.reject(`query fail ov type:${failType}`);
+          });
+        }, 0);
+      }
+      return freezeState.types2dfd[code]!;
+    };
+    const query = async (codes: string[]) => Promise.all(codes.map(code => addCode2Query(code).promise));
+    const saveMetas = (metas: iOvMeta[]) => {
+      const type2Metas = metas.reduce((prev, item) => {
+        if (!prev[item.type]) {prev[item.type] = [];}
+        prev[item.type].push(item);
+        return prev;
+      }, {} as Record<string, iOvMeta[]>);
+      Object.entries(type2Metas).forEach(([type, value]) => {
+        freezeState.types2dfd[type] = defer<iOvMeta[]>();
+        freezeState.types2dfd[type].resolve(value);
+      });
+    };
+    return Object.assign(query, { saveMetas, query, freezeState, addCode2Query });
+  })();
+
+  function getOvByTypes(type: string): Promise<iOvMeta[]>
+  function getOvByTypes(types: string[]): Promise<Record<string, iOvMeta[]>>
+  async function getOvByTypes(param: string | string[]): Promise<any> {
+    if (Array.isArray(param)) {
+      const metasList = await _getOvByTypes(param);
+      metasList.reduce((prev, list) => {
+        !!list.length && (prev[list[0].type] = list);
+        return prev;
+      }, {} as Record<string, iOvMeta[]>);
+    } else {
+      const metasList = await _getOvByTypes([param]);
+      return metasList[0];
+    }
+  }
+
+  const state = reactive({
+    type2metas: {} as Record<string, iOvMeta[] | undefined>
+  });
+  const getNameByTypeAndCodeComputed = (type: string, val: string) => {
+    if (!state.type2metas[type]) {
+      getOvByTypes(type).then(val => {!state.type2metas[type] && (state.type2metas[type] = val);});
+      return '...';
+    } else {
+      const find = state.type2metas[type]!.find(i => i.code === val);
+      return find?.name || val;
+    }
+  };
+
+  return { getOvByTypes, getNameByTypeAndCodeComputed };
+}
+
+export type iOvService = ReturnType<typeof createOvService>

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

@@ -1,5 +1,5 @@
-import {createOvService} from "./createOvService";
-
-export {createOvService};
-
-export default createOvService;
+import {createOvService} from "./createOvService";
+
+export {createOvService};
+
+export default createOvService;

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

@@ -1,11 +1,11 @@
-export interface iOvMeta {
-  id: string,
-  code: string,
-  name: string,
-  type: string,
-  comment: string,
-}
-
-export interface iOvServiceConfig {
-  getOvByTypes: (types: string[]) => Promise<iOvMeta[]>;
-}
+export interface iOvMeta {
+  id: string,
+  code: string,
+  name: string,
+  type: string,
+  comment: string,
+}
+
+export interface iOvServiceConfig {
+  getOvByTypes: (types: string[]) => Promise<iOvMeta[]>;
+}

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

@@ -0,0 +1,108 @@
+import {designComponent, getComponentCls, iHTMLDivElement, nextIndex, onBeforeUnmount, onMounted, PropType, reactive, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {getCenterRect, iImagePreviewerOption, ImagePreviewerHooks} from "../ImagePreviewer/image-previewer.utils";
+import {ImagePreviewer} from "../ImagePreviewer";
+import {getRectAutoFormat} from "../../utils/getRectAutoFormat";
+import {unit} from "plain-utils/string/unit";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {addElementListener} from "plain-utils/dom/addElementListener";
+import {delay} from "plain-utils/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;
+  }
+}

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

@@ -0,0 +1,52 @@
+import {reactive} from "plain-design-composition";
+import {createImagePreviewerOption, iImagePreviewerOption, iImagePreviewerParamOption} from "../ImagePreviewer/image-previewer.utils";
+import {ImagePreviewerFixedContainer} from "./ImagePreviewerFixedContainer";
+import {getDeviceInfo} from "../../utils/getDeviceInfo";
+
+/**
+ * 图片预览服务
+ * @author  韦胜健
+ * @date    2024/1/8 10:04
+ */
+export const $previewer = (() => {
+
+  const state = reactive({
+    /*有service option不同，image previewer同时只能显示一个*/
+    option: null as null | iImagePreviewerOption,
+  });
+
+  /**
+   * 大图查看图片
+   * @author  韦胜健
+   * @date    2024/1/5 11:22
+   */
+  const preview = async (param: iImagePreviewerParamOption, imageElement?: HTMLImageElement) => {
+
+    const isMobile = getDeviceInfo().deviceType === 'mobile';
+
+    state.option = createImagePreviewerOption(param, imageElement, {
+      autoHeight: false,
+      mask: true,
+      globalKeyboardEvent: true,
+      button: true,
+      ...isMobile ? {
+        gallery: false,
+        button: false,
+        swipeButton: false,
+        galleryHeight: 0,
+      } : {},
+    });
+  };
+
+  const close = (optionOrId: string | iImagePreviewerOption) => {
+    const optionId = typeof optionOrId === "string" ? optionOrId : optionOrId.id;
+    if (!!state.option && state.option.id === optionId) {state.option = null;}
+  };
+
+  const render = () => !!state.option && <ImagePreviewerFixedContainer option={state.option}/>;
+
+  return { preview, render, close };
+
+})();
+
+export default $previewer;

package/src/packages/components/$upload/createUploadService.tsx

@@ -1,57 +1,57 @@
-import {iUploadData, iUploadServiceConfig} from "./upload.utils";
-import {$file, FileServiceUploadConfig} from "../$file";
-import {$notice} from "../$notice";
-import i18n from "../i18n";
-
-export function createUploadService(config: iUploadServiceConfig) {
-
-  const upload = async (uploadConfig: Partial<Omit<FileServiceUploadConfig, 'file'>> & { file: FileServiceUploadConfig['file'] }) => {
-
-    let uploadData: iUploadData = {
-      action: uploadConfig.action || config.action,
-      filename: uploadConfig.filename || config.filename,
-      file: uploadConfig.file,
-      data: uploadConfig.data || {},
-    };
-
-    if (!!config.process) {
-      uploadData = await config.process(uploadData) || uploadData;
-    }
-
-    const { data, filename, file, action } = uploadData;
-
-    const formData = new FormData();
-
-    if (!!data) Object.entries(data).forEach(([key, value]) => formData.append(key, value));
-
-    if (Array.isArray(file)) {
-      file.forEach(f => formData.append(filename, f));
-    } else {
-      formData.append(filename, file);
-    }
-
-    try {
-      const response = await config.http.post<any>(action, formData, {
-        headers: {
-          'Content-type': 'multipart/form-data',
-          ...uploadConfig.headers,
-        },
-        withCredentials: !!uploadConfig.withCredentials,
-        onUploadProgress: (e: any) => {
-          const percent = Number((e.loaded / e.total * 100).toFixed(2));
-          uploadConfig.onProgress?.(percent, e);
-        },
-      });
-      uploadConfig.onSuccess?.(response);
-    } catch (e) {
-      $notice.error(`${i18n('file.uploadFailed').d('上传失败')},` + String(e).toString());
-      uploadConfig.onError?.(e as any);
-      throw e;
-    }
-  };
-
-  return { config, ...$file, upload };
-
-}
-
-export type iUploadService = ReturnType<typeof createUploadService>
+import {iUploadData, iUploadServiceConfig} from "./upload.utils";
+import {$file, FileServiceUploadConfig} from "../$file";
+import {$notice} from "../$notice";
+import i18n from "../i18n";
+
+export function createUploadService(config: iUploadServiceConfig) {
+
+  const upload = async (uploadConfig: Partial<Omit<FileServiceUploadConfig, 'file'>> & { file: FileServiceUploadConfig['file'] }) => {
+
+    let uploadData: iUploadData = {
+      action: uploadConfig.action || config.action,
+      filename: uploadConfig.filename || config.filename,
+      file: uploadConfig.file,
+      data: uploadConfig.data || {},
+    };
+
+    if (!!config.process) {
+      uploadData = await config.process(uploadData) || uploadData;
+    }
+
+    const { data, filename, file, action } = uploadData;
+
+    const formData = new FormData();
+
+    if (!!data) Object.entries(data).forEach(([key, value]) => formData.append(key, value));
+
+    if (Array.isArray(file)) {
+      file.forEach(f => formData.append(filename, f));
+    } else {
+      formData.append(filename, file);
+    }
+
+    try {
+      const response = await config.http.post<any>(action, formData, {
+        headers: {
+          'Content-type': 'multipart/form-data',
+          ...uploadConfig.headers,
+        },
+        withCredentials: !!uploadConfig.withCredentials,
+        onUploadProgress: (e: any) => {
+          const percent = Number((e.loaded / e.total * 100).toFixed(2));
+          uploadConfig.onProgress?.(percent, e);
+        },
+      });
+      uploadConfig.onSuccess?.(response);
+    } catch (e) {
+      $notice.error(`${i18n.$it('file.uploadFailed').d('上传失败')},` + String(e).toString());
+      uploadConfig.onError?.(e as any);
+      throw e;
+    }
+  };
+
+  return { config, ...$file, upload };
+
+}
+
+export type iUploadService = ReturnType<typeof createUploadService>

package/src/packages/components/$upload/upload.utils.ts

@@ -1,17 +1,17 @@
-import {iHttp} from "../createHttp";
-import {PlainObject} from "plain-utils/utils/event";
-
-export interface iUploadServiceConfig {
-  http: iHttp,
-  action: string,
-  filename: string,
-  prefix?: string,
-  process?: (uploadData: iUploadData) => void | iUploadData | Promise<iUploadData | void>
-}
-
-export interface iUploadData {
-  action: string,
-  filename: string,
-  data: PlainObject,
-  file: File | File[],
-}
+import {iHttp} from "../createHttp";
+import {PlainObject} from "plain-utils/utils/event";
+
+export interface iUploadServiceConfig {
+  http: iHttp,
+  action: string,
+  filename: string,
+  prefix?: string,
+  process?: (uploadData: iUploadData) => void | iUploadData | Promise<iUploadData | void>
+}
+
+export interface iUploadData {
+  action: string,
+  filename: string,
+  data: PlainObject,
+  file: File | File[],
+}