plain-design 1.0.0-beta.28 → 1.0.0-beta.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.28",
+  "version": "1.0.0-beta.29",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -68,7 +68,7 @@
     "fork-ts-checker-webpack-plugin": "^6.2.4",
     "mini-css-extract-plugin": "^1.4.1",
     "mockjs": "^1.1.0",
-    "plain-design-composition": "^0.0.177",
+    "plain-design-composition": "^0.0.180",
     "postcss": "^8.2.13",
     "postcss-loader": "^4.2.0",
     "qs": "^6.10.1",

package/src/packages/components/CarouselGroup/carousel.scss

@@ -40,8 +40,8 @@
       transition: background-color 300ms linear;
       cursor: pointer;
       pointer-events: auto;
-      background-color: rgba(#ffffff, 0.45);
-      color: plv(pbfc);
+      background-color: rgba(#000000, 0.2);
+      color: white;
       width: 36px;
       height: 36px;
       border-radius: 36px;

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

@@ -1,4 +1,4 @@
-import {ComponentPropsType, Fragment, computed, designComponent, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "plain-design-composition";
+import {ComponentPropsType, computed, designComponent, Fragment, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "plain-design-composition";
 import {iPopupAnimation, iPopupCustomOption, iPopupDefaultOption, iPopupPlacement, iPopupTrigger, iPopupUseOption, PopupItemProvide} from "../usePopup/utils/popup.utils";
 import {Reference} from "../Reference";
 import {usePopup} from "../usePopup";
@@ -34,7 +34,7 @@ export const Popup = designComponent({
     beforeHide: { type: Function as PropType<iPopupCustomOption['beforeHide']> },         // 隐藏之前处理动作，返回false则阻止隐藏
     destroyOnClose: { type: Boolean, default: true, },                                                    // 是否在关闭的时候销毁内容
     type: { type: String as PropType<iPopupDefaultOption['type']> },                      // 类型，在打开一个popup的时候，会将同类型的popup自动关闭
-    to: { type: String as PropType<iPopupDefaultOption['to']> },                          // 挂载到某个dom节点下
+    appendToBody: { type: Boolean as PropType<iPopupDefaultOption['appendToBody']>, default: true },                          // 挂载到某个dom节点下
     offset: { type: Number as PropType<iPopupDefaultOption['offset']> },                  // 在direction方向上的距离
     autoSwitchDirection: { type: Boolean as PropType<iPopupDefaultOption['autoSwitchDirection']>, default: true },// 当空间不够时，是否自动切换direction
     size: { type: String as PropType<iPopupDefaultOption['size']> },                      // popup内容尺寸
@@ -230,7 +230,7 @@ export const Popup = designComponent({
         noPadding: props.noPadding,
         destroyOnClose: props.destroyOnClose,
         type: props.type,
-        to: props.to,
+        appendToBody: props.appendToBody,
         offset: props.offset,
         autoSwitchDirection: props.autoSwitchDirection,
         refreshOnScroll: props.refreshOnScroll,

package/src/packages/components/VirtualList/useVirtualList.tsx

@@ -291,7 +291,8 @@ export function useVirtualList(
     // !!refs.scroll && refs.scroll.methods.scrollTop(0, 0);
   });
 
-  onMounted(() => {
+  onMounted(async () => {
+    await delay(23);
     let hostHeight = refs.scroll!.refs.host!.offsetHeight;
     const headEl = refs.scroll!.refs.host!.querySelector('[data-virtual-head]') as undefined | HTMLDivElement;
     const footEl = refs.scroll!.refs.host!.querySelector('[data-virtual-foot]') as undefined | HTMLDivElement;

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

@@ -370,35 +370,44 @@ export const PopupItem = designComponent({
     PopupItemProvide.provide(state);
 
     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}
-          onClick={handler.onClickPopup}
-        >
-          {/*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}
+                >
+                  {slots.default.isExist() ? slots.default() : state.option.render()}
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-      </Portal>
+          );
+          return state.option.appendToBody ? (
+            <Portal to={`.${getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}`}>
+              {content}
+            </Portal>
+          ) : content;
+        })()
+      )
     );
   },
 });

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

@@ -62,7 +62,7 @@ export function usePopupManager({ getSize }: { getSize: () => typeof ThemeSize.T
         trigger: ePopupTrigger.hover,
         animation: ePopupAnimation.fade,
         destroyOnClose: true,
-        to: 'body',
+        appendToBody: true,
         offset: 0,
         offsetAlign: 0,
         autoSwitchDirection: true,

package/src/packages/components/usePopup/utils/popup.utils.ts

@@ -62,7 +62,7 @@ export interface iPopupDefaultOption {
   trigger: iPopupTrigger,                     // 触发类型
   animation: iPopupAnimation,                 // 动画类型
   destroyOnClose: boolean,                    // 关闭的时候销毁popup
-  to: string,                                 // 挂载到某个dom节点下
+  appendToBody: boolean,                      // 挂载到某个dom节点下
   offset: number,                             // 在direction方向上的距离
   offsetAlign: number,                        // 在align方向上的偏移距离
   autoSwitchDirection: boolean,               // 当空间不够时，是否自动切换direction