plain-design 1.0.0-beta.9 → 1.0.0-beta.90

package/src/packages/uses/useStyle.tsx

@@ -1,68 +1,82 @@
-import {computed, inject, PropType, provide} from "plain-design-composition";
-import {useFunctionWrapper} from "./useFunctionWrapper";
-import {createEnum} from "plain-utils/utils/createEnum";
-import {ApplicationConfigurationProvider} from "../components/Application/utils/application.utils";
-
-/**
- * 模式：fill：填充；flat：扁平（默认），outline：线性；text：文字
- * @author  韦胜健
- * @date    2022.4.27 0:22
- */
-export const ThemeMode = createEnum(['fill', 'flat', 'outline', 'text'] as const);
-export const ThemeStatus = createEnum(['secondary', 'primary', 'success', 'warn', 'error'] as const);
-export const ThemeShape = createEnum(['square', 'round', 'none'] as const);
-export const ThemeSize = createEnum(['large', 'normal', 'small', 'mini'] as const);
-
-export const StyleProps = {
-  shape: { type: String as PropType<typeof ThemeShape.TYPE> },                      //  'square', 'round'
-  size: { type: String as PropType<typeof ThemeSize.TYPE> },                        //  'large', 'normal', 'small', 'mini'
-  status: { type: String as PropType<typeof ThemeStatus.TYPE> },                    //  'secondary', 'primary', 'success', 'warn', 'error'
-} as const;
-
-interface UseStyleProvideData {
-  shape: typeof ThemeShape.TYPE,
-  size: typeof ThemeSize.TYPE,
-  status?: typeof ThemeStatus.TYPE,
-  default: {
-    shape: typeof ThemeShape.TYPE,
-    size: typeof ThemeSize.TYPE,
-    inputMode: 'stroke' | 'flat',
-  },
-}
-
-interface UseStyleOption extends Partial<UseStyleProvideData> {
-  adjust?: (data: UseStyleProvideData) => void | UseStyleProvideData;
-}
-
-const USE_STYLE_PROVIDER = '@@USE_STYLE_PROVIDER';
-
-export const useStyle = useFunctionWrapper('style', (ctx, option: UseStyleOption = {}): { styleComputed: { value: UseStyleProvideData } } => {
-
-  const applicationConfiguration = ApplicationConfigurationProvider.inject();
-  const parent = inject(USE_STYLE_PROVIDER, null) as null | { value: UseStyleProvideData };
-
-  const styleComputed = computed(() => {
-    const defaultData = Object.assign({ shape: applicationConfiguration.value.default.shape, size: applicationConfiguration.value.default.size }, option);
-
-    const { shape, size, status } = ctx.props;
-    const parentData = !!parent ? parent.value : {} as any;
-    let data: UseStyleProvideData = {
-      shape: shape || parentData.shape || defaultData.shape,
-      size: size || parentData.size || defaultData.size,
-      status: status || parentData.status || defaultData.status,
-      default: applicationConfiguration.value.default
-    };
-    if (!!defaultData.adjust) {
-      data = defaultData.adjust(data) || data;
-    }
-    (data as any).ctx = ctx;
-    (data as any).parent = parent;
-    return data;
-  });
-
-  provide(USE_STYLE_PROVIDER, styleComputed);
-
-  return { styleComputed };
-});
-
-export type tStyleComputed = ReturnType<typeof useStyle>['styleComputed']
+import {computed, inject, onBeforeUnmount, PropType, provide} from "plain-design-composition";
+import {useFunctionWrapper} from "./useFunctionWrapper";
+import {createEnum} from "plain-utils/utils/createEnum";
+import {ApplicationConfigurationProvider} from "../components/Application/utils/application.utils";
+
+/**
+ * 模式：fill：填充；flat：扁平（默认），outline：线性；text：文字
+ * @author  韦胜健
+ * @date    2022.4.27 0:22
+ */
+export const ThemeMode = createEnum(['fill', 'flat', 'outline', 'text', 'stroke'] as const);
+export const ThemeStatus = createEnum(['secondary', 'primary', 'success', 'warn', 'error'] as const);
+export const ThemeShape = createEnum(['square', 'round', 'none'] as const);
+export const ThemeSize = createEnum(['large', 'normal', 'small', 'mini'] as const);
+export const InputMode = createEnum(['flat', 'stroke', 'text'] as const);
+
+export const StyleProps = {
+  shape: { type: String as PropType<typeof ThemeShape.TYPE> },                      //  'square', 'round'
+  size: { type: String as PropType<typeof ThemeSize.TYPE> },                        //  'large', 'normal', 'small', 'mini'
+  status: { type: String as PropType<typeof ThemeStatus.TYPE> },                    //  'secondary', 'primary', 'success', 'warn', 'error'
+  inputMode: { type: String as PropType<typeof InputMode.TYPE> },                   // input的样式类型,flat填充，stroke线型
+} as const;
+
+export interface UseStyleProvideData {
+  shape: typeof ThemeShape.TYPE,
+  size: typeof ThemeSize.TYPE,
+  status?: typeof ThemeStatus.TYPE,
+  inputMode?: typeof InputMode.TYPE,
+
+  default: {
+    shape: typeof ThemeShape.TYPE,
+    size: typeof ThemeSize.TYPE,
+    inputMode: typeof InputMode.TYPE,
+    buttonMode: typeof ThemeMode.TYPE,
+  },
+}
+
+interface UseStyleOption extends Partial<UseStyleProvideData> {
+  adjust?: (data: UseStyleProvideData) => void | UseStyleProvideData;
+}
+
+const USE_STYLE_PROVIDER = '@@USE_STYLE_PROVIDER';
+
+export const useStyle = useFunctionWrapper('style', (ctx, option: UseStyleOption = {}): { styleComputed: { value: UseStyleProvideData } } => {
+
+  const applicationConfiguration = ApplicationConfigurationProvider.inject();
+  const parent = inject(USE_STYLE_PROVIDER, null) as null | { value: UseStyleProvideData };
+
+  const styleComputed = computed(() => {
+    const defaultData = Object.assign({ shape: applicationConfiguration.value.default.shape, size: applicationConfiguration.value.default.size, inputMode: applicationConfiguration.value.default.inputMode }, option);
+
+    const { shape, size, status, inputMode } = ctx.props;
+    const parentData = !!parent ? parent.value : {} as any;
+    let data: UseStyleProvideData = {
+      shape: shape || parentData.shape || defaultData.shape,
+      size: size || parentData.size || defaultData.size,
+      status: status || parentData.status || defaultData.status,
+      inputMode: inputMode || parentData.inputMode || defaultData.inputMode,
+      default: applicationConfiguration.value.default
+    };
+    if (!!defaultData.adjust) {
+      data = defaultData.adjust(data) || data;
+    }
+    (data as any).ctx = ctx;
+    (data as any).parent = parent;
+    return data;
+  });
+
+  provide(USE_STYLE_PROVIDER, styleComputed);
+
+  onBeforeUnmount(() => {
+    setTimeout(() => {
+      (styleComputed.value as any).ctx = null;
+      (styleComputed.value as any).parent = null;
+      styleComputed.effect.stop();
+    });
+  });
+
+  return { styleComputed };
+});
+
+export type tStyleComputed = ReturnType<typeof useStyle>['styleComputed']

package/src/packages/utils/ClientZoom.ts

@@ -1,50 +1,50 @@
-import {iMouseEvent} from 'plain-design-composition';
-
-export const ClientZoom = (() => {
-  let zoom: '' | number = '';
-  return {
-    get: (): number => {
-      return zoom === '' ? 1 : zoom;
-    },
-    set: (_zoom: number | null) => {
-      const __zoom = _zoom == null ? '' : _zoom;
-      if (zoom != __zoom) {
-        zoom = __zoom;
-      }
-      if ((document.body.style as any).zoom != zoom) {
-        (document.body.style as any).zoom = zoom;
-      }
-    },
-    getClientSize: () => {
-      const { clientHeight, clientWidth } = document.documentElement;
-      if (zoom == '' || zoom == 1) {
-        return { clientHeight, clientWidth };
-      } else {
-        return {
-          clientHeight: Math.floor(clientHeight / zoom),
-          clientWidth: Math.floor(clientWidth / zoom),
-        };
-      }
-    },
-    getClientPosition: (e: iMouseEvent | MouseEvent): { clientX: number, clientY: number, offsetX: number, offsetY: number, } => {
-      const { clientX, clientY, offsetX, offsetY } = 'nativeEvent' in e ? e.nativeEvent : e;
-      return {
-        clientX: ClientZoom.formatClientValue(clientX),
-        clientY: ClientZoom.formatClientValue(clientY),
-        offsetX: ClientZoom.formatClientValue(offsetX),
-        offsetY: ClientZoom.formatClientValue(offsetY),
-      };
-    },
-    formatClientValue: (val: number) => {
-      return ClientZoom.zoomPosition(val);
-    },
-    zoomPosition(val: number) {
-      const zoom = ClientZoom.get();
-      return Number((val / zoom).toFixed(2));
-    },
-    zoomSize(val: number) {
-      const zoom = ClientZoom.get();
-      return Number((val * zoom).toFixed(2));
-    },
-  };
-})();
+import {iMouseEvent} from 'plain-design-composition';
+
+export const ClientZoom = (() => {
+  let zoom: '' | number = '';
+  return {
+    get: (): number => {
+      return zoom === '' ? 1 : zoom;
+    },
+    set: (_zoom: number | null) => {
+      const __zoom = _zoom == null ? '' : _zoom;
+      if (zoom != __zoom) {
+        zoom = __zoom;
+      }
+      if ((document.body.style as any).zoom != zoom) {
+        (document.body.style as any).zoom = zoom;
+      }
+    },
+    getClientSize: () => {
+      const { clientHeight, clientWidth } = document.documentElement;
+      if (zoom == '' || zoom == 1) {
+        return { clientHeight, clientWidth };
+      } else {
+        return {
+          clientHeight: Math.floor(clientHeight / zoom),
+          clientWidth: Math.floor(clientWidth / zoom),
+        };
+      }
+    },
+    getClientPosition: (e: iMouseEvent | MouseEvent): { clientX: number, clientY: number, offsetX: number, offsetY: number, } => {
+      const { clientX, clientY, offsetX, offsetY } = 'nativeEvent' in e ? e.nativeEvent : e;
+      return {
+        clientX: ClientZoom.formatClientValue(clientX),
+        clientY: ClientZoom.formatClientValue(clientY),
+        offsetX: ClientZoom.formatClientValue(offsetX),
+        offsetY: ClientZoom.formatClientValue(offsetY),
+      };
+    },
+    formatClientValue: (val: number) => {
+      return ClientZoom.zoomPosition(val);
+    },
+    zoomPosition(val: number) {
+      const zoom = ClientZoom.get();
+      return Number((val / zoom).toFixed(2));
+    },
+    zoomSize(val: number) {
+      const zoom = ClientZoom.get();
+      return Number((val * zoom).toFixed(2));
+    },
+  };
+})();

package/src/packages/utils/ComponentUtils.ts

@@ -0,0 +1,10 @@
+export const ComponentUtils = {
+  /**
+   * 适配taro ui的一些写法
+   * @author  韦胜健
+   * @date    2024/1/3 16:48
+   */
+  getElInfo: async (selector: string) => {
+    return document.querySelector(selector)!.getBoundingClientRect();
+  },
+};

package/src/packages/utils/FixInput.ts

@@ -1,3 +1,3 @@
-import {fixInputCursor} from "plain-design-composition";
-
-export const FixInput = fixInputCursor('input')
+import {fixInputCursor} from "plain-design-composition";
+
+export const FixInput = fixInputCursor('input')

package/src/packages/utils/InnerTransition.ts

@@ -1,13 +1,13 @@
-import {addClass} from "plain-utils/dom/addClass";
-import {removeClass} from "plain-utils/dom/removeClass";
-
-const cls = "plain-disable-inner-transition";
-
-export const InnerTransition = {
-  disable: (el: HTMLElement | null | undefined) => {
-    addClass(el, cls);
-  },
-  enable: (el: HTMLElement | null | undefined) => {
-    removeClass(el, cls);
-  },
-};
+import {addClass} from "plain-utils/dom/addClass";
+import {removeClass} from "plain-utils/dom/removeClass";
+
+const cls = "plain-disable-inner-transition";
+
+export const InnerTransition = {
+  disable: (el: HTMLElement | null | undefined) => {
+    addClass(el, cls);
+  },
+  enable: (el: HTMLElement | null | undefined) => {
+    removeClass(el, cls);
+  },
+};

package/src/packages/utils/LoadingText.ts

@@ -1,11 +1,11 @@
-import {reactive} from "plain-design-composition";
-
-export const LoadingText = reactive({ value: '...' });
-
-setInterval(() => {
-  if (LoadingText.value.length === 3) {
-    LoadingText.value = '.';
-  } else {
-    LoadingText.value += '.';
-  }
-}, 500);
+import {reactive} from "plain-design-composition";
+
+export const LoadingText = reactive({ value: '...' });
+
+setInterval(() => {
+  if (LoadingText.value.length === 3) {
+    LoadingText.value = '.';
+  } else {
+    LoadingText.value += '.';
+  }
+}, 500);

package/src/packages/utils/OpenController.ts

@@ -1,15 +1,15 @@
-import {inject, provide} from "plain-design-composition";
-
-export const OpenController = (() => {
-
-  const PROVIDE_KEY = `@@OPEN_CONTROLLER`;
-
-  return {
-    provide: (isOpen: () => boolean) => {
-      provide(PROVIDE_KEY, isOpen);
-    },
-    inject: () => {
-      return inject<(() => boolean) | null>(PROVIDE_KEY, null);
-    },
-  };
-})();
+import {inject, provide} from "plain-design-composition";
+
+export const OpenController = (() => {
+
+  const PROVIDE_KEY = `@@OPEN_CONTROLLER`;
+
+  return {
+    provide: (isOpen: () => boolean) => {
+      provide(PROVIDE_KEY, isOpen);
+    },
+    inject: () => {
+      return inject<(() => boolean) | null>(PROVIDE_KEY, null);
+    },
+  };
+})();

package/src/packages/utils/buildCycleIndexList.ts

@@ -0,0 +1,31 @@
+export function buildCycleIndexList({ length, current }: { length: number, current: number }) {
+
+  const sourceList = new Array(length).fill(null).map((_, index) => index);
+  const cycleIndexList = (() => {
+
+    if (sourceList.length <= 2) {
+      return sourceList;
+    }
+
+    const leftList = sourceList.slice(0, current);
+    const rightList = sourceList.slice(current + 1);
+
+    while (Math.abs(leftList.length - rightList.length) >= 2) {
+      if (leftList.length > rightList.length) {
+        rightList.push(leftList.shift()!);
+      } else {
+        leftList.unshift(rightList.pop()!);
+      }
+    }
+    return [...leftList, current, ...rightList];
+  })();
+
+  const currentIndexInCycle = cycleIndexList.indexOf(current);
+
+  const index2distance = cycleIndexList.reduce((prev, item, cycleIndex) => {
+    prev[item] = cycleIndex - currentIndexInCycle;
+    return prev;
+  }, {} as Record<number, number>);
+
+  return { cycleIndexList, currentIndexInCycle, index2distance };
+}

package/src/packages/utils/clearFields.ts

@@ -1,16 +1,16 @@
-function defaultIsClear(key: string, val: any) {
-  return val == null;
-}
-
-export function clearFields<T extends Record<string, any> | null | undefined>(obj: T, isClear?: (key: string, val: any) => boolean): Partial<T> {
-  if (!obj) {return obj;}
-  if (!isClear) {
-    isClear = defaultIsClear;
-  }
-  return Object.entries(obj).reduce((prev, [key, value]) => {
-    if (!isClear!(key, value)) {
-      prev[key] = value;
-    }
-    return prev;
-  }, {} as any);
-}
+function defaultIsClear(key: string, val: any) {
+  return val == null;
+}
+
+export function clearFields<T extends Record<string, any> | null | undefined>(obj: T, isClear?: (key: string, val: any) => boolean): Partial<T> {
+  if (!obj) {return obj;}
+  if (!isClear) {
+    isClear = defaultIsClear;
+  }
+  return Object.entries(obj).reduce((prev, [key, value]) => {
+    if (!isClear!(key, value)) {
+      prev[key] = value;
+    }
+    return prev;
+  }, {} as any);
+}