plain-design 1.0.0-beta.73 → 1.0.0-beta.75

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

@@ -1,56 +1,56 @@
-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 }
+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

@@ -1,108 +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 "plain-utils/dom/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>
-    );
-  },
-});
+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 "plain-utils/dom/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

@@ -1,18 +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;
-  }
-}
+@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;
+  }
+}