plain-design 1.0.0-beta.10 → 1.0.0-beta.101

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

@@ -1,6 +1,6 @@
 import {createCounter} from "plain-utils/utils/createCounter";
 import {createApplicationServiceComponent} from "../Application/service/createApplicationServiceComponent";
-import {computed, getComponentCls, iMouseEvent, nextIndex, onBeforeUnmount, onMounted, Portal, reactive, ref, useStyles} from "plain-design-composition";
+import {computed, createHooks, getComponentCls, iHTMLDivElement, iMouseEvent, nextIndex, onBeforeUnmount, onMounted, Portal, reactive, ref, useRefs, useStyles} from "plain-design-composition";
 import {KeyboardService} from "../KeyboardService";
 import {Image} from "../Image";
 import {Tooltip} from "../Tooltip";
@@ -9,6 +9,7 @@ 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 "plain-design-composition";
+import {ThemeStatus} from "../../uses/useStyle";
+import {createTransitionHandler} from "../createTransitionHandler";
+import './loading.service.scss';
+import {delay} from "plain-utils/utils/delay";
+import {createEffects} from "plain-utils/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 "plain-utils/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 {createHooks} from "plain-design-composition";
+
+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>();

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 "plain-design-composition";
 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/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 "plain-utils/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/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 "plain-design-composition";
 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/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 "plain-utils/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/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 "plain-design-composition";
+
+export function usePageRenderContext() {
+  const renderHook = createRenderHook();
+  return {
+    renderHook,
+  };
+}

package/src/packages/components/usePopup/PopupItem.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, iHTMLDivElement, iHTMLElement, iTransitionEvent, nextIndex, onBeforeUnmount, onMounted, Portal, PropType, reactive, SimpleFunction, useClassCache, useRefs, useStyleCache} from "plain-design-composition";
+import {designComponent, getComponentCls, iHTMLDivElement, iHTMLElement, iMouseEvent, iTransitionEvent, nextIndex, onBeforeUnmount, onMounted, Portal, PropType, reactive, SimpleFunction, useClassCache, useRefs, useStyleCache} from "plain-design-composition";
 import {ePopupAnimation, iPopupOption, iPopupRefs, PopupItemProvide} from "./utils/popup.utils";
 import {createEffects} from "plain-utils/utils/createEffects";
 import {delay} from "plain-utils/utils/delay";
@@ -7,10 +7,10 @@ import {PopupManager} from "./usePopupManager";
 import {refreshPopup} from "./refresh/refreshPopup";
 import {getBoundary} from "./utils/getBoundary";
 import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
-import {getElementParents} from "../../utils/getElementParents";
+import {getElementParents} from "plain-utils/dom/getElementParents";
 import {usePopupTrigger} from "./trigger/usePopupTrigger";
 import {APPLICATION_SERVICE_CONTAINER_CLASS} from "../Application/utils/application.utils";
-import {doNothing} from "../../utils/doNothing";
+import {doNothing} from "plain-utils/utils/doNothing";
 import {unit} from "plain-utils/string/unit";
 import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
 
@@ -82,6 +82,7 @@ export const PopupItem = designComponent({
         'popup-item-is-dark': !application.value.theme.dark && !state.option.status && !!state.option.dark,
         [`popup-item-status-${state.option.status}`]: !!state.option.status,
         'popup-item-dark-app': application.value.theme.dark,
+        'popup-item-no-interactive': !state.option.interactive,
       }
     ]);
 
@@ -193,7 +194,7 @@ export const PopupItem = designComponent({
             clearTimeout(timer);
             timer = null;
           }
-          methods.refresh(true);
+          methods.refresh(state.option.transformRefreshOnScroll);
           timer = setTimeout(() => {
             methods.refresh();
           }, 100);
@@ -262,6 +263,14 @@ export const PopupItem = designComponent({
         };
         return check;
       })(),
+      /**
+       * 阻止点击popup的事件冒泡，如果有div包裹popup几点，在react中即使popup不是这个div的子节点也会导致事件冒泡到div上
+       * @author  韦胜健
+       * @date    2023/8/10 11:27
+       */
+      onClickPopup: (e: iMouseEvent) => {
+        e.stopPropagation();
+      },
     };
 
     onMounted(async () => {
@@ -360,35 +369,58 @@ export const PopupItem = designComponent({
 
     PopupItemProvide.provide(state);
 
+    let prevContent: any;
+
     return () => (
-      !!state.option.reference && <Portal to={`.${getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}`}>
-        <div
-          data-id={state.option.id}
-          ref={onRef.popup}
-          className={classes.value}
-          data-popup-show={String(state.isShow)}
-          onTransitionEnd={handler.onTransitionend}
-          style={styles.value}
-        >
-          {/*slide的情况下，arrow得放body外面，避免被overflow:hidden*/}
-          {!!state.option.arrowSize && !state.option.noArrow && state.option.animation !== ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
-          <div
-            ref={onRef.body}
-            className="popup-item-body"
-          >
-            {/*scale的情况下，arrow得放body里边，一遍能够继承body的transform:scale*/}
-            {!!state.option.arrowSize && !state.option.noArrow && state.option.animation === ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
+      !!state.option.reference && (
+        (() => {
+          const content = (
             <div
-              ref={onRef.content}
-              style={contentStyles.value}
-              className="popup-item-content"
+              data-id={state.option.id}
+              ref={onRef.popup}
+              className={classes.value}
+              data-popup-show={String(state.isShow)}
               onTransitionEnd={handler.onTransitionend}
+              style={styles.value}
+              onClick={handler.onClickPopup}
             >
-              {slots.default.isExist() ? slots.default() : state.option.render()}
+              {/*slide的情况下，arrow得放body外面，避免被overflow:hidden*/}
+              {!!state.option.arrowSize && !state.option.noArrow && state.option.animation !== ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
+              <div
+                ref={onRef.body}
+                className="popup-item-body"
+              >
+                {/*scale的情况下，arrow得放body里边，一遍能够继承body的transform:scale*/}
+                {!!state.option.arrowSize && !state.option.noArrow && state.option.animation === ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
+                <div
+                  ref={onRef.content}
+                  style={contentStyles.value}
+                  className="popup-item-content"
+                  onTransitionEnd={handler.onTransitionend}
+                >
+                  {(() => {
+                    /*关闭的时候如果content为空，则渲染最后一次不为空的content内容*/
+                    let content = slots.default.isExist() ? slots.default() : state.option.render();
+                    if (!content) {
+                      if (!state.isShow) {
+                        content = prevContent;
+                      }
+                    } else {
+                      prevContent = content;
+                    }
+                    return content;
+                  })()}
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-      </Portal>
+          );
+          return state.option.appendToBody ? (
+            <Portal to={`.${getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}`}>
+              {content}
+            </Portal>
+          ) : content;
+        })()
+      )
     );
   },
 });