plain-design 1.0.0-beta.11 → 1.0.0-beta.110

package/src/packages/components/useImage/ImageService.tsx

@@ -1,14 +1,15 @@
-import {createCounter} from "plain-utils/utils/createCounter";
+import {createCounter} from "@peryl/utils/createCounter";
 import {createApplicationServiceComponent} from "../Application/service/createApplicationServiceComponent";
-import {computed, getComponentCls, iMouseEvent, nextIndex, onBeforeUnmount, onMounted, Portal, reactive, ref, useStyles} from "plain-design-composition";
-import {KeyboardService} from "../KeyboardService";
+import {computed, createHooks, getComponentCls, iHTMLDivElement, iMouseEvent, nextIndex, onBeforeUnmount, onMounted, Portal, reactive, ref, useRefs, useStyles} from "@peryl/react-compose";
+import {KeyboardService} from "@peryl/utils/keyboard";
 import {Image} from "../Image";
 import {Tooltip} from "../Tooltip";
 import {Icon} from "../Icon";
-import i18n from "../i18n";
-import Transition from "../Transition";
+import {i18n} from "../i18n";
+import {Transition} from "../Transition";
 import {APPLICATION_SERVICE_CONTAINER_CLASS} from "../Application/utils/application.utils";
 import {ClientZoom} from "../ClientZoom";
+import {createTransitionHandler} from "../createTransitionHandler";
 
 const nextCount = createCounter("image_preview");
 
@@ -22,9 +23,17 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
   name: 'image-preview-service',
   setup: ({ option, destroy }) => {
 
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
+
     const step = { scale: 0.2, rotate: 90, };
 
     const isShow = ref(false);
+    const isOpen = ref(false);
+
+    const hooks = {
+      onOpen: createHooks(),
+      onClose: createHooks(),
+    };
 
     const state = reactive({
       option,
@@ -65,6 +74,7 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
       await state.mounted;
       isShow.value = true;
       state.zIndex = nextIndex();
+      handleTransition();
 
       setTimeout(() => {
         const activeElement = document.activeElement as HTMLElement;
@@ -72,7 +82,10 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
       });
     };
 
-    const hide = () => isShow.value = false;
+    const hide = () => {
+      isShow.value = false;
+      handleTransition();
+    };
 
     const resetAdjust = () => state.adjust = {
       scale: null as null | number,           // 当前图片缩放大小
@@ -91,7 +104,7 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
 
     const buttons = [
       {
-        label: i18n('image.rotation_90').d('逆时针旋转90°'),
+        label: i18n.$it('image.rotation_90').d('逆时针旋转90°'),
         icon: 'pi-rotate-left',
         onClick: () => {
           let { rotate } = state.adjust;
@@ -101,7 +114,7 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
         }
       },
       {
-        label: i18n('image.rotation90').d('顺时针旋转90°'),
+        label: i18n.$it('image.rotation90').d('顺时针旋转90°'),
         icon: 'pi-rotate-right',
         onClick: () => {
           let { rotate } = state.adjust;
@@ -111,7 +124,7 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
         }
       },
       {
-        label: i18n('base.zoomIn').d('放大'),
+        label: i18n.$it('base.zoomIn').d('放大'),
         icon: 'pi-zoom-in',
         onClick: () => {
           let { scale } = state.adjust;
@@ -119,7 +132,7 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
         }
       },
       {
-        label: i18n('base.zoomOut').d('缩小'),
+        label: i18n.$it('base.zoomOut').d('缩小'),
         icon: 'pi-zoom-out',
         onClick: () => {
           let { scale } = state.adjust;
@@ -127,7 +140,7 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
         }
       },
       {
-        label: i18n('image.prevPicture').d('上一张'),
+        label: i18n.$it('image.prevPicture').d('上一张'),
         icon: 'pi-left',
         show: () => isMultipleImages.value,
         onClick: () => {
@@ -138,7 +151,7 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
         },
       },
       {
-        label: i18n('image.nextPicture').d('下一张'),
+        label: i18n.$it('image.nextPicture').d('下一张'),
         icon: 'pi-right',
         show: () => isMultipleImages.value,
         onClick: () => {
@@ -149,12 +162,12 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
         },
       },
       {
-        label: i18n('base.reset').d('重置'),
+        label: i18n.$it('base.reset').d('重置'),
         icon: 'pi-sync',
         onClick: resetAdjust,
       },
       {
-        label: i18n('base.close').d('关闭'),
+        label: i18n.$it('base.close').d('关闭'),
         icon: 'pi-close',
         onClick: hide,
       },
@@ -204,18 +217,28 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
       onClickMask: hide,
     };
 
+    const handleTransition = createTransitionHandler({
+      getTransitionElement: () => refs.el,
+      isOpen,
+      isShow,
+      onOpen: () => hooks.onOpen.exec(undefined),
+      onClose: () => hooks.onClose.exec(undefined),
+    });
+
     onBeforeUnmount(KeyboardService.listen({ esc: () => {isShow.value && hide();} }));
 
+    onBeforeUnmount(hooks.onClose.use(() => {destroy();}));
+
     return {
       refer: {
         isShow,
-        isOpen: isShow,
+        isOpen,
         service,
       },
       render: () => (
         <Portal to={`.${getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}`}>
           <Transition name={getComponentCls('image-preview')} show={isShow.value}>
-            <div className={getComponentCls('image-preview-service')} style={{ zIndex: state.zIndex }} onClick={handler.onClickMask}>
+            <div ref={onRef.el} className={getComponentCls('image-preview-service')} style={{ zIndex: state.zIndex }} onClick={handler.onClickMask}>
               <div className="image-preview-service-img-wrapper">
                 <Transition switch name={getComponentCls('transition-scale')} key={state.count}>
                   {/*不加这个div，switch动画没有效果，真是奇怪。Button可以，Card可以，就Image不行*/}

package/src/packages/components/useLoading/LoadingService.tsx

@@ -0,0 +1,106 @@
+import {createApplicationServiceComponent} from "../Application/service/createApplicationServiceComponent";
+import {closeLoadingServiceHook, iLoadingServiceOption} from "./loading.service.utils";
+import {computed, createHooks, getComponentCls, iHTMLDivElement, onBeforeUnmount, reactive, ref, useClasses, useRefs, useStyles} from "@peryl/react-compose";
+import {ThemeStatus} from "../../uses/useStyle";
+import {createTransitionHandler} from "../createTransitionHandler";
+import './loading.service.scss';
+import {delay} from "@peryl/utils/delay";
+import {createEffects} from "@peryl/utils/createEffects";
+
+export const LoadingService = createApplicationServiceComponent<iLoadingServiceOption>({
+  name: 'loading-service',
+  setup({ option, destroy }) {
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
+
+    const isShow = ref(false);
+    const isOpen = ref(false);
+
+    const { effects: setupEffects } = createEffects();
+    const { effects: timerEffects } = createEffects();
+
+    const state = reactive({
+      option,
+      percent: 0,
+    });
+
+    const classes = useClasses(() => [
+      getComponentCls('loading-service'),
+      {
+        'loading-service-show': isShow.value
+      }
+    ]);
+
+    const innerStyles = useStyles(style => {style.transform = `scaleX(${state.percent})`;});
+
+    const hooks = {
+      onOpen: createHooks(),
+      onClose: createHooks(),
+    };
+
+    const targetOption = computed(() => {
+      return {
+        ...state.option,
+        status: state.option.status || ThemeStatus.primary,
+        maxTime: state.option.maxTime === undefined ? 60 * 1000 : state.option.maxTime
+      };
+    });
+
+    async function service(option: iLoadingServiceOption) {
+      state.option = option;
+      await delay(23);
+      isShow.value = true;
+      handleTransition();
+      await delay(78);
+      state.percent = 0.2;
+
+      if (targetOption.value.maxTime) {
+        const timer = setTimeout(() => hide(), targetOption.value.maxTime);
+        timerEffects.push(() => clearTimeout(timer));
+      }
+
+      const maxPercent = 0.9;
+      let spacePrefix = '0.0';
+      const interval = setInterval(() => {
+        const space = Number(`${spacePrefix}${Math.ceil(Math.random() * 10)}`);
+        state.percent = Math.min(maxPercent, state.percent + (space));
+        if (state.percent > 0.75 && spacePrefix.length === 3) {spacePrefix += '0';}
+        if (state.percent >= maxPercent) {clearInterval(interval);}
+      }, 500);
+      timerEffects.push(() => clearInterval(interval));
+    }
+
+    const hide = async () => {
+      state.percent = 1;
+      timerEffects.clear();
+      await delay(150);
+      isShow.value = false;
+      handleTransition();
+    };
+
+    const handleTransition = createTransitionHandler({
+      getTransitionElement: () => refs.el,
+      isShow, isOpen,
+      onOpen: () => hooks.onOpen.exec(undefined),
+      onClose: () => hooks.onClose.exec(undefined),
+    });
+
+    setupEffects.push(closeLoadingServiceHook.use(id => {(!id || (id === state.option.id)) && (hide());}));
+    setupEffects.push(hooks.onClose.use(() => {destroy();}));
+
+    onBeforeUnmount(setupEffects.clear);
+
+    return {
+      refer: {
+        service,
+        isShow,
+        isOpen,
+      },
+      render: () => (
+        <div ref={onRef.el} className={classes.value} data-service-id={state.option.id}>
+          <div className="loading-service-inner" style={innerStyles.value}/>
+        </div>
+      )
+    };
+  },
+});

package/src/packages/components/useLoading/index.tsx

@@ -0,0 +1,31 @@
+import {closeLoadingServiceHook, iLoadingServiceOption} from "./loading.service.utils";
+import {createApplicationService} from "../Application/service/createApplicationService";
+import {createApplicationServiceManager} from "../Application/service/createApplicationServiceManager";
+import {LoadingService} from "./LoadingService";
+import {createCounter} from "@peryl/utils/createCounter";
+
+interface iLoadingServiceFunction {
+  (option?: iLoadingServiceOption): () => void;
+}
+
+const nextLoadingId = createCounter('loading');
+
+export const useLoading = createApplicationService(
+  'loading',
+  createApplicationServiceManager({ name: 'loading', Service: LoadingService }),
+  (getManager) => {
+
+    const service: iLoadingServiceFunction = (_option) => {
+      const option: iLoadingServiceOption = _option || {};
+      !option.id && (option.id = nextLoadingId());
+
+      getManager().then(async manager => {await manager.service(option);});
+
+      return () => closeLoadingServiceHook.exec(option!.id!);
+    };
+
+    return { $loading: service };
+  },
+);
+
+export default useLoading;

package/src/packages/components/useLoading/loading.service.scss

@@ -0,0 +1,25 @@
+@include comp(loading-service) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  transition: all ease 300ms;
+
+  &:not(.loading-service-show) {
+    opacity: 0;
+  }
+
+  &.loading-service-show {
+    opacity: 1;
+  }
+
+  .loading-service-inner {
+    position: absolute;
+    inset: 0;
+    height: 100%;
+    background-color: plv(primary-6);
+    transition: all ease 500ms;
+    transform-origin: top left;
+  }
+}

package/src/packages/components/useLoading/loading.service.utils.tsx

@@ -0,0 +1,13 @@
+import {ThemeStatus} from "../../uses/useStyle";
+import {anonymousEffects, createHooks} from "@peryl/react-compose";
+
+export interface iLoadingServiceOption {
+  id?: string,
+  hold?: boolean,
+  status?: typeof ThemeStatus.TYPE,
+  color?: string,
+  maxTime?: number | null,
+  onClose?: () => void,
+}
+
+export const closeLoadingServiceHook = createHooks<(id?: string) => void>(anonymousEffects);

package/src/packages/components/useMessage/Message.tsx

@@ -1,7 +1,8 @@
-import {designComponent, getComponentCls, iMouseEvent, nextIndex, onMounted, PropType, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, iMouseEvent, nextIndex, onBeforeUnmount, onMounted, PropType, useClasses} from "@peryl/react-compose";
 import {closeMessageServiceHook, iMessageServiceOption} from "./message.service.utils";
 import Icon from "../Icon";
 import './message.scss';
+import {useStyle} from "../../uses/useStyle";
 
 export const Message = designComponent({
   name: 'message-service',
@@ -16,9 +17,12 @@ export const Message = designComponent({
 
     onMounted(() => emit.onReady());
 
+    const { styleComputed } = useStyle();
+
     const classes = useClasses(() => [
       getComponentCls('message'),
-      `message-status-${props.option.status}`
+      `message-status-${props.option.status}`,
+      `message-size-${styleComputed.value.size}`
     ]);
     const styles = { zIndex: nextIndex() };
 
@@ -47,7 +51,9 @@ export const Message = designComponent({
     let closeTimer: number | null = null;
     !!props.option.time && (closeTimer = setTimeout(close, props.option.time) as any);
 
-    closeMessageServiceHook.use(id => {(!id || id === props.option.id) && close();});
+    onBeforeUnmount(
+      closeMessageServiceHook.use(id => {(!id || id === props.option.id) && close();})
+    );
 
     return {
       refer: {

package/src/packages/components/useMessage/MessageContainer.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, onMounted, reactive, useClasses, useRefList} from "plain-design-composition";
+import {designComponent, getComponentCls, onMounted, reactive, useClasses, useRefList} from "@peryl/react-compose";
 import {iMessageServiceOption} from "./message.service.utils";
 import {List} from "../List";
 import {Message} from "./Message";

package/src/packages/components/useMessage/MessageManager.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, onMounted, PropType, reactive, useRefList} from "plain-design-composition";
+import {designComponent, getComponentCls, onMounted, PropType, reactive, useRefList} from "@peryl/react-compose";
 import {iApplicationManagerData} from "../Application/service/useApplicationService";
 import {MessageDirection} from "./message.service.utils";
 import {MessageContainer} from "./MessageContainer";

package/src/packages/components/useMessage/index.tsx

@@ -1,7 +1,7 @@
 import {createApplicationService} from "../Application/service/createApplicationService";
 import {MessageManager} from "./MessageManager";
 import {closeMessageServiceHook, iMessageServiceOption, MessageDirection, nextMessageId} from "./message.service.utils";
-import {formatOptions} from "../../utils/formatServiceOptions";
+import {formatOptions} from "@peryl/utils/formatServiceOptions";
 import {ThemeStatus} from "../../uses/useStyle";
 import {ThemeStatusIcons} from "../Application/theme/theme.utils";
 

package/src/packages/components/useMessage/message.scss

@@ -61,7 +61,7 @@
   box-shadow: plv(message-box-shadow);
   position: relative;
   overflow: hidden;
-  background-color: plv(background-lite);
+  background-color: plv(bg-4);
   color: plv(text-2);
   border-radius: plv(box-size-normal-border-radius);
 
@@ -85,7 +85,7 @@
     justify-content: center;
 
     @include prefix(icon) {
-      color: plv(background-lite);
+      color: plv(bg-4);
       position: relative;
       z-index: 1;
 
@@ -128,7 +128,7 @@
     }
     .message-close {
       @include prefix(icon) {
-        color: white;
+       color: plv(pbfc);
       }
 
       &:after {
@@ -142,4 +142,8 @@
       }
     }
   }
+
+  @include sizeMixin(message, (font-size)) {
+    padding: calc(#{plv(dropdown-size-#{$name}-padding-y)} * 2);
+  }
 }

package/src/packages/components/useMessage/message.service.utils.tsx

@@ -1,7 +1,7 @@
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 import {ThemeStatus} from "../../uses/useStyle";
-import {createHooks, iMouseEvent, RenderNode} from "plain-design-composition";
-import {createCounter} from "plain-utils/utils/createCounter";
+import {anonymousEffects, createHooks, iMouseEvent, RenderNode} from "@peryl/react-compose";
+import {createCounter} from "@peryl/utils/createCounter";
 
 /**
  * 消息提示服务位置方向
@@ -22,7 +22,7 @@ export const nextMessageId = createCounter('message-service');
  * @author  韦胜健
  * @date    2022.5.4 22:32
  */
-export const closeMessageServiceHook = createHooks<(id: string) => void>();
+export const closeMessageServiceHook = createHooks<(id: string) => void>(anonymousEffects);
 
 /**
  * 消息提示服务对象参数类型

package/src/packages/components/useNotice/Notice.tsx

@@ -1,5 +1,5 @@
 import './notice.scss';
-import {designComponent, getComponentCls, iMouseEvent, nextIndex, onMounted, PropType, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, iMouseEvent, nextIndex, onBeforeUnmount, onMounted, PropType, useClasses} from "@peryl/react-compose";
 import {closeNoticeServiceHook, iNoticeServiceOption} from "./noitice.service.utils";
 import Icon from "../Icon";
 
@@ -47,7 +47,9 @@ export const Notice = designComponent({
     let closeTimer: number | null = null;
     !!props.option.time && (closeTimer = setTimeout(close, props.option.time) as any);
 
-    closeNoticeServiceHook.use(id => {(!id || id === props.option.id) && close();});
+    onBeforeUnmount(
+      closeNoticeServiceHook.use(id => {(!id || id === props.option.id) && close();})
+    );
 
     return {
       refer: {

package/src/packages/components/useNotice/NoticeContainer.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, onMounted, PropType, reactive, useClasses, useRefList} from "plain-design-composition";
+import {designComponent, getComponentCls, onMounted, PropType, reactive, useClasses, useRefList} from "@peryl/react-compose";
 import {iNoticeServiceOption, NoticeDirection} from "./noitice.service.utils";
 import {List} from "../List";
 import {Notice} from "./Notice";

package/src/packages/components/useNotice/NoticeManager.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, onMounted, PropType, reactive, useRefList} from "plain-design-composition";
+import {designComponent, getComponentCls, onMounted, PropType, reactive, useRefList} from "@peryl/react-compose";
 import {iApplicationManagerData} from "../Application/service/useApplicationService";
 import {NoticeDirection} from "./noitice.service.utils";
 import {NoticeContainer} from "./NoticeContainer";

package/src/packages/components/useNotice/index.tsx

@@ -1,7 +1,7 @@
 import {createApplicationService} from "../Application/service/createApplicationService";
 import {NoticeManager} from "./NoticeManager";
 import {closeNoticeServiceHook, iNoticeServiceOption, nextNoticeId, NoticeDirection} from "./noitice.service.utils";
-import {formatOptions} from "../../utils/formatServiceOptions";
+import {formatOptions} from "@peryl/utils/formatServiceOptions";
 import {i18n} from "../../i18n";
 import {ThemeStatus} from "../../uses/useStyle";
 import {ThemeStatusIcons} from "../Application/theme/theme.utils";
@@ -14,7 +14,7 @@ export const useNotice = createApplicationService(
     const service = (sourceOption: string | iNoticeServiceOption, externalOption?: iNoticeServiceOption): () => void => {
       const option = formatOptions(sourceOption, externalOption);
       option.id = nextNoticeId();
-      if (option.title === undefined) {option.title = () => i18n('base.notice').d('提示');}
+      if (option.title === undefined) {option.title = () => i18n.$it('base.notice').d('提示');}
       if (option.time === undefined) {option.time = 3000;}
       if (option.status === undefined) {option.status = ThemeStatus.primary;}
       if (!!option.status && !option.icon) {option.icon = ThemeStatusIcons[option.status];}

package/src/packages/components/useNotice/noitice.service.utils.tsx

@@ -1,7 +1,7 @@
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 import {ThemeStatus} from "../../uses/useStyle";
-import {createHooks, RenderNode, SimpleFunction} from "plain-design-composition";
-import {createCounter} from "plain-utils/utils/createCounter";
+import {anonymousEffects, createHooks, RenderNode, SimpleFunction} from "@peryl/react-compose";
+import {createCounter} from "@peryl/utils/createCounter";
 
 /**
  * 通知方向
@@ -22,7 +22,7 @@ export const nextNoticeId = createCounter('notice-service');
  * @author  韦胜健
  * @date    2022.5.6 18:53
  */
-export const closeNoticeServiceHook = createHooks<(id?: null | string) => void>();
+export const closeNoticeServiceHook = createHooks<(id?: null | string) => void>(anonymousEffects);
 
 /**
  * 消息通知服务配置对象类型

package/src/packages/components/useNotice/notice.scss

@@ -40,7 +40,7 @@
 @include prefix(notice) {
   text-align: initial;
   pointer-events: auto;
-  background-color: plv(background-lite);
+  background-color: plv(bg-4);
   display: inline-block;
   padding: plv(notice-padding);
   box-shadow: plv(notice-box-shadow);
@@ -65,7 +65,7 @@
     cursor: pointer;
 
     @include prefix(icon) {
-      color: white;
+      color: plv(pbfc);
       position: relative;
       z-index: 1;
 
@@ -111,7 +111,7 @@
     font-size: plv(notice-content-font-size);
     padding-top: 16px;
     color: plv(text-2);
-    line-height: 1.5715;
+    line-height: plv(line-height);
   }
 
   .notice-foot {

package/src/packages/components/usePageRender/index.tsx

@@ -0,0 +1,3 @@
+export function usePageRender() {
+
+}

package/src/packages/components/usePageRenderContext/index.tsx

@@ -0,0 +1,8 @@
+import {createRenderHook} from "@peryl/react-compose";
+
+export function usePageRenderContext() {
+  const renderHook = createRenderHook();
+  return {
+    renderHook,
+  };
+}