plain-design 1.0.0-beta.4 → 1.0.0-beta.41

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

@@ -1,4 +1,4 @@
-import {ComponentPropsType, 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,8 @@ 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节点下
+    transformRefreshOnScroll: { type: Boolean as PropType<iPopupDefaultOption['transformRefreshOnScroll']>, default: true },// scroll的时候refresh使用transform来优化
     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内容尺寸
@@ -139,7 +140,9 @@ export const Popup = designComponent({
     const reference = computed(() => {
       let reference: any = props.reference || state.getReference();
       if (!!reference) {
-        if (typeof reference === "function") {reference = reference();}
+        if (typeof reference === "function") {
+          reference = reference();
+        }
         if (!!reference && !!reference.$el) {
           reference = reference.$el;
         }
@@ -155,7 +158,9 @@ export const Popup = designComponent({
     const stickyReference = computed(() => {
       let reference: any = props.stickyReference;
       if (!!reference) {
-        if (typeof reference === "function") {reference = reference();}
+        if (typeof reference === "function") {
+          reference = reference();
+        }
         if (!!reference && !!reference.$el) {
           reference = reference.$el;
         }
@@ -226,7 +231,8 @@ export const Popup = designComponent({
         noPadding: props.noPadding,
         destroyOnClose: props.destroyOnClose,
         type: props.type,
-        to: props.to,
+        appendToBody: props.appendToBody,
+        transformRefreshOnScroll: props.transformRefreshOnScroll,
         offset: props.offset,
         autoSwitchDirection: props.autoSwitchDirection,
         refreshOnScroll: props.refreshOnScroll,
@@ -266,12 +272,16 @@ export const Popup = designComponent({
         },
         /*开启之前检查，如果已经禁用则禁止显示*/
         beforeShow: () => {
-          if (props.disabled || props.readonly) {return false;}
+          if (props.disabled || props.readonly) {
+            return false;
+          }
           return props.beforeShow?.();
         },
         /*关闭之前检查，如果已经禁用则禁止关闭*/
         beforeHide: () => {
-          if (props.disabled || props.readonly) {return false;}
+          if (props.disabled || props.readonly) {
+            return false;
+          }
           return props.beforeHide?.();
         },
 
@@ -284,7 +294,7 @@ export const Popup = designComponent({
               {(slots.head.isExist() || !!props.title) && (
                 <div className="popper-head">{slots.head(typeof props.title === "function" ? props.title() : props.title)}</div>
               )}
-              {slots.popper(typeof props.message === "function" ? props.message() : props.message)}
+              <Fragment key="popper">{slots.popper(typeof props.message === "function" ? props.message() : props.message)}</Fragment>
             </div>
           );
 
@@ -346,14 +356,18 @@ export const Popup = designComponent({
      */
     if (!!model.value) {
       const unwatch = watch(() => reference.value, reference => {
-        if (!reference) {return;}
+        if (!reference) {
+          return;
+        }
         unwatch();
         $popup.show(state.getOption());
       });
     }
 
     onBeforeUnmount(
-      watch(() => props.watchData, () => {$popup.update(state.getOption());})
+      watch(() => props.watchData, () => {
+        $popup.update(state.getOption());
+      })
     );
 
     const refresh = () => {

package/src/packages/components/ProgressBar/progress-bar.scss

@@ -32,7 +32,7 @@
         text-align: right;
 
         span {
-          color: white;
+         color: plv(pbfc);
         }
       }
     }

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

@@ -5,6 +5,7 @@ import {Icon} from "../Icon";
 import './rate.scss';
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
+import {ClientZoom} from "../ClientZoom";
 
 export const Rate = designComponent({
   name: 'rate',
@@ -79,7 +80,8 @@ export const Rate = designComponent({
 
     const methods = {
       reset: (e: MouseEvent | iMouseEvent) => {
-        let dur = e.clientX - (elLeft.value || 0);
+        const { clientX } = ClientZoom.getClientPosition(e);
+        let dur = clientX - (elLeft.value || 0);
         let start = 0;
         let end = totalWidth.value;
         let step = end / props.count;

package/src/packages/components/Scroll/HorizontalScrollbar.tsx

@@ -5,6 +5,7 @@ import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {Scroll} from "./index";
 import {delay} from "plain-utils/utils/delay";
 import Tooltip from "../Tooltip";
+import {ClientZoom} from "../ClientZoom";
 
 export const HorizontalScrollbar = designComponent({
   props: {
@@ -41,15 +42,17 @@ export const HorizontalScrollbar = designComponent({
         state.scrollLeft = (e.target as HTMLElement).scrollLeft;
       },
       onMousedown: (e: iMouseEvent) => {
+        const { clientX } = ClientZoom.getClientPosition(e);
         scroll.freezeState.isDragging = true;
         dragState.left = left.value;
-        dragState.clientX = e.clientX;
+        dragState.clientX = clientX;
         document.addEventListener('mousemove', handler.onMousemove);
         document.addEventListener('mouseup', handler.onMouseup);
         disabledUserSelect();
       },
       onMousemove: (e: MouseEvent) => {
-        let deltaX = e.clientX - dragState.clientX;
+        const { clientX } = ClientZoom.getClientPosition(e);
+        let deltaX = clientX - dragState.clientX;
         const left = dragState.left + deltaX;
         let scrollLeft = left * (scroll.state.contentWidth - scroll.state.hostWidth) / (scroll.state.hostWidth - width.value);
         scrollLeft = Math.max(0, Math.min(scrollLeft, scroll.state.contentWidth - scroll.state.hostWidth));
@@ -66,7 +69,8 @@ export const HorizontalScrollbar = designComponent({
         enableUserSelect();
 
         if (scroll.props.scrollAfterDragEnd) {
-          let deltaX = e.clientX - dragState.clientX;
+          const { clientX } = ClientZoom.getClientPosition(e);
+          let deltaX = clientX - dragState.clientX;
           const left = dragState.left + deltaX;
           scroll.refs.wrapper!.scrollLeft = left * (scroll.state.contentWidth - scroll.state.hostWidth) / (scroll.state.hostWidth - width.value);
         }

package/src/packages/components/Scroll/VerticalScrollbar.tsx

@@ -5,6 +5,7 @@ import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {Scroll} from "./index";
 import {delay} from "plain-utils/utils/delay";
 import Tooltip from "../Tooltip";
+import {ClientZoom} from "../ClientZoom";
 
 export const VerticalScrollbar = designComponent({
   props: {
@@ -46,15 +47,17 @@ export const VerticalScrollbar = designComponent({
         state.scrollTop = (e.target as HTMLElement).scrollTop;
       },
       onMousedown: (e: iMouseEvent) => {
+        const { clientY } = ClientZoom.getClientPosition(e);
         scroll.freezeState.isDragging = true;
         dragState.top = top.value;
-        dragState.clientY = e.clientY;
+        dragState.clientY = clientY;
         document.addEventListener('mousemove', handler.onMousemove);
         document.addEventListener('mouseup', handler.onMouseup);
         disabledUserSelect();
       },
       onMousemove: (e: MouseEvent) => {
-        let deltaY = e.clientY - dragState.clientY;
+        const { clientY } = ClientZoom.getClientPosition(e);
+        let deltaY = clientY - dragState.clientY;
         let top = dragState.top + deltaY;
         let scrollTop = top * (scroll.state.contentHeight - scroll.state.hostHeight) / (scroll.state.hostHeight - height.value);
         scrollTop = Math.max(0, Math.min(scrollTop, scroll.state.contentHeight - scroll.state.hostHeight));
@@ -72,7 +75,8 @@ export const VerticalScrollbar = designComponent({
         enableUserSelect();
 
         if (scroll.props.scrollAfterDragEnd) {
-          let deltaY = e.clientY - dragState.clientY;
+          const { clientY } = ClientZoom.getClientPosition(e);
+          let deltaY = clientY - dragState.clientY;
           let top = dragState.top + deltaY;
           scroll.refs.wrapper!.scrollTop = top * (scroll.state.contentHeight - scroll.state.hostHeight) / (scroll.state.hostHeight - height.value);
         }

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

@@ -78,9 +78,9 @@ export const Scroll = designComponent({
       set isDragging(val: boolean) {
         this._isDragging = val;
         if (val) {
-          refs.host!.setAttribute('is-dragging', '');
+          refs.host?.setAttribute('is-dragging', '');
         } else {
-          refs.host!.removeAttribute('is-dragging');
+          refs.host?.removeAttribute('is-dragging');
         }
       },
     };
@@ -215,9 +215,9 @@ export const Scroll = designComponent({
        * @date    2020/12/15 10:16
        */
       disableListTransition: (() => {
-        const disabledQueueAnimation = debounce(() => refs.host!.removeAttribute('virtual-scrolling'), 300, true);
+        const disabledQueueAnimation = debounce(() => refs.host?.removeAttribute('virtual-scrolling'), 300, true);
         return () => {
-          refs.host!.setAttribute('virtual-scrolling', '');
+          refs.host?.setAttribute('virtual-scrolling', '');
           disabledQueueAnimation();
         };
       })(),
@@ -227,9 +227,9 @@ export const Scroll = designComponent({
        * @date    2022.10.28 21:34
        */
       disableInnerTransition: (() => {
-        const disabledQueueAnimation = debounce(() => refs.host!.removeAttribute('disable-all-transition'), 300, true);
+        const disabledQueueAnimation = debounce(() => refs.host?.removeAttribute('disable-all-transition'), 300, true);
         return () => {
-          refs.host!.setAttribute('disable-all-transition', '');
+          refs.host?.setAttribute('disable-all-transition', '');
           disabledQueueAnimation();
         };
       })()

package/src/packages/components/Select/createPublicSelectRender.tsx

@@ -236,7 +236,7 @@ export function createPublicSelectRender(
                   const { virtualRowSize } = props;
                   return virtualRowSize == null ? SelectDefaultVirtualRowSize[styleComputed.value.size] : virtualRowSize;
                 })()}>
-                  {{ default: ({ item, index }: { item: iSelectOptionProps, index: number }) => <SelectOption {...item} index={index} key={index}/> }}
+                  {{ default: ({ item, index, vIndex }: { item: iSelectOptionProps, index: number, vIndex: number }) => <SelectOption {...item} index={index} key={vIndex}/> }}
                 </VirtualList>
               </div>) : (
                 matchOptionPropsList.map((i, index) => (<SelectOption {...i} index={index}/>))

package/src/packages/components/Slider/slider.scss

@@ -47,7 +47,7 @@
         transition: all 300ms ease;
         opacity: 0;
         background-color: rgba(black, 0.8);
-        color: white;
+        color: #ffffff;
         padding: 3px 6px;
         line-height: initial;
         position: absolute;

package/src/packages/components/Slider/useSliderDotDragier.tsx

@@ -3,6 +3,7 @@ import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
 import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {iMouseEvent, reactive} from "plain-design-composition";
 import {iSliderHooks} from "./slider.utils";
+import {ClientZoom} from "../ClientZoom";
 
 export function useSliderDotDraggier<InitialState>(
   hooks: iSliderHooks,
@@ -24,10 +25,11 @@ export function useSliderDotDraggier<InitialState>(
 
   const handler = {
     onMousedown: (e: iMouseEvent) => {
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
       staticState = {
         start: {
-          x: e.clientX,
-          y: e.clientY,
+          x: clientX,
+          y: clientY,
         },
         state: getInitialState(),
       };
@@ -46,8 +48,9 @@ export function useSliderDotDraggier<InitialState>(
     },
     onMousemove: (e: MouseEvent) => {
       if (!staticState) {return;}
-      const durX = e.clientX - staticState.start.x;
-      const durY = e.clientY - staticState.start.y;
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      const durX = clientX - staticState.start.x;
+      const durY = clientY - staticState.start.y;
       handleDraggier({
         durX,
         durY,

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

@@ -0,0 +1,191 @@
+import {computed, CSSProperties, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, reactive, useClasses, useModel, useRefs} from "plain-design-composition";
+import './sort-list.scss';
+import {createEffects} from "plain-utils/utils/createEffects";
+import {addWindowListener} from "plain-utils/dom/addWindowListener";
+import {getRectAutoFormat} from "../../utils/getRectAutoFormat";
+import {iElementRect} from "../../utils/getRowEl";
+
+export const SortList = designComponent({
+  name: 'sort-list',
+  props: {
+    modelValue: { type: Array as PropType<any[]> },
+    col: { type: Number, default: 1 },
+    space: { type: Number, default: 0 },
+  },
+  emits: {
+    onUpdateModelValue: (val: any[]) => true,
+    onDragStart: (data: { item: any, index: number, e: iMouseEvent }) => true,
+  },
+  scopeSlots: {
+    default: (data: { item: any, index: number }) => true,
+  },
+  setup({ props, scopeSlots, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
+
+    const model = useModel(() => props.modelValue || [], emit.onUpdateModelValue);
+
+    const isHorizontal = computed(() => props.col > 1);
+
+    const classes = useClasses(() => [
+      getComponentCls('sort-list'),
+    ]);
+
+    const draggier = (() => {
+
+      const draggierState = reactive({
+        isDragging: false,
+      });
+
+      const mousedown = (e: iMouseEvent, item: any, index: number) => {
+        emit.onDragStart({ item, index, e });
+
+        const { effects: draggierEffects } = createEffects();
+        const staticState = {
+          start: {
+            x: e.clientX,
+            y: e.clientY,
+            left: 0,
+            top: 0,
+          },
+          siblingRects: (() => {
+            const sortItemElements = Array.from(refs.el!.querySelectorAll('.sort-item')) as HTMLElement[];
+            return sortItemElements.map((el, index) => {
+              return {
+                index,
+                rects: getRectAutoFormat(el)
+              };
+            });
+          })(),
+          dropData: null as null | {
+            itemRect: { index: number, rects: Omit<iElementRect, 'right' | 'bottom'> },
+            pos: 'prev' | 'next'
+          }
+        };
+        const sourceElement = (e.currentTarget as HTMLElement);
+        const sourceRect = getRectAutoFormat(sourceElement);
+        staticState.start.left = sourceRect.left;
+        staticState.start.top = sourceRect.top;
+        let shadowElement: HTMLElement | null = null;
+        let indicator: HTMLDivElement | null = null;
+        const indicatorSize = 2;
+
+        draggierEffects.push(addWindowListener('mouseup', draggierEffects.clear));
+        draggierEffects.push(addWindowListener('mousemove', (e) => {
+          const durX = e.clientX - staticState.start.x;
+          const durY = e.clientY - staticState.start.y;
+
+          if (!draggierState.isDragging) {
+            if (Math.abs(durX) > 5 || Math.abs(durY) > 5) {
+              draggierState.isDragging = true;
+              draggierEffects.push(() => {draggierState.isDragging = false;});
+
+              shadowElement = sourceElement.cloneNode(true) as HTMLElement;
+              shadowElement.style.boxSizing = 'border-box';
+              shadowElement.style.position = 'fixed';
+              shadowElement.style.top = sourceRect.top + 'px';
+              shadowElement.style.left = sourceRect.left + 'px';
+              shadowElement.style.height = sourceRect.height + 'px';
+              shadowElement.style.width = sourceRect.width + 'px';
+              shadowElement.style.opacity = '0.5';
+              shadowElement.style.zIndex = '2';
+              refs.el!.appendChild(shadowElement);
+              draggierEffects.push(() => {refs.el!.removeChild(shadowElement!);});
+
+              sourceElement.style.opacity = "0";
+              draggierEffects.push(() => sourceElement.style.opacity = "");
+
+              indicator = document.createElement('div') as HTMLDivElement;
+              indicator.style.position = 'fixed';
+              indicator.style.zIndex = '3';
+              refs.el!.appendChild(indicator);
+              draggierEffects.push(() => {refs.el!.removeChild(indicator!);});
+
+              draggierEffects.push(() => {
+                if (!staticState.dropData) {return;}
+                if (staticState.dropData.itemRect.index === index) {return;}
+                let currentIndex = index;
+                let targetIndex = staticState.dropData.itemRect.index + (staticState.dropData.pos === 'prev' ? 0 : 1);
+                const newData = [...model.value];
+                const removeData = newData.splice(currentIndex, 1);
+                newData.splice(targetIndex > currentIndex ? targetIndex - 1 : targetIndex, 0, ...removeData);
+                model.value = newData;
+              });
+            }
+          }
+          if (!draggierState.isDragging || !shadowElement || !indicator) {
+            return;
+          }
+
+          shadowElement.style.top = `${Math.ceil(staticState.start.top + durY)}px`;
+          shadowElement.style.left = `${Math.ceil(staticState.start.left + durX)}px`;
+
+          const matchItemRect = staticState.siblingRects.find(i => {
+            return e.clientY > i.rects.top && e.clientY < i.rects.top + i.rects.height && e.clientX > i.rects.left && e.clientX < i.rects.left + i.rects.width;
+          });
+          if (!matchItemRect) {
+            staticState.dropData = null;
+            indicator.style.display = 'none';
+          } else {
+            staticState.dropData = {
+              itemRect: matchItemRect,
+              pos: (() => {
+                if (isHorizontal.value) {
+                  return e.clientX > matchItemRect.rects.left + matchItemRect.rects.width / 2 ? 'next' : 'prev';
+                } else {
+                  return e.clientY > matchItemRect.rects.top + matchItemRect.rects.height / 2 ? 'next' : 'prev';
+                }
+              })()
+            };
+            indicator.style.display = 'block';
+            indicator.style.backgroundColor = 'black';
+            if (isHorizontal.value) {
+              indicator.style.top = matchItemRect.rects.top + 'px';
+              indicator.style.height = matchItemRect.rects.height + 'px';
+              indicator.style.left = matchItemRect.rects.left + (staticState.dropData.pos === 'prev' ? (-indicatorSize / 2 - props.space / 2) : (matchItemRect.rects.width + props.space / 2 - indicatorSize / 2)) + 'px';
+              indicator.style.width = indicatorSize + 'px';
+            } else {
+              indicator.style.left = matchItemRect.rects.left + 'px';
+              indicator.style.width = matchItemRect.rects.width + 'px';
+              indicator.style.top = matchItemRect.rects.top + (staticState.dropData.pos === 'prev' ? (-indicatorSize / 2 - props.space / 2) : (matchItemRect.rects.height + props.space / 2 - indicatorSize / 2)) + 'px';
+              indicator.style.height = indicatorSize + 'px';
+            }
+          }
+        }));
+      };
+
+      return { mousedown };
+    })();
+
+    return () => (
+      <div
+        className={classes.value}
+        data-direction={isHorizontal.value ? 'horizontal' : 'vertical'}
+        ref={onRef.el}
+      >
+        {model.value.map((item, index) => {
+          const styles = {} as CSSProperties;
+          if (props.col !== 1) {
+            styles.width = `calc((100% - ${(props.col - 1) * props.space}px) / ${props.col})`;
+            if ((index + 1) % props.col !== 0) {
+              styles.marginRight = props.space + 'px';
+            }
+          } else {
+            styles.width = '100%';
+          }
+          styles.marginBottom = props.space + 'px';
+          return (
+            <div
+              className="sort-item"
+              style={styles}
+              key={index}
+              onMouseDown={e => draggier.mousedown(e, item, index)}
+            >
+              {scopeSlots.default({ item, index }, null)}
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+});

package/src/packages/components/SortList/sort-list.scss

@@ -0,0 +1,11 @@
+@include comp(sort-list) {
+  user-select: none;
+  &[data-direction=horizontal] {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  &[data-direction=vertical] {
+    display: flex;
+    flex-direction: column;
+  }
+}