plain-design 1.0.0-beta.8 → 1.0.0-beta.81

package/src/packages/components/Slider/useSlider.single.tsx

@@ -1,149 +1,149 @@
-import {iSliderPublicParams} from "./slider.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {computed, useModel, useStyles} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
-import {useSliderDotDraggier} from "./useSliderDotDragier";
-
-export function useSliderSingle(
-  {
-    props,
-    event,
-    hooks,
-    totalLength,
-    utils,
-    editComputed,
-  }: iSliderPublicParams) {
-
-  const model = useModel(() => props.modelValue, event.emit.onUpdateModelValue, { autoEmit: props.emitImmediate });
-
-  const { effects } = createEffects();
-
-  /**
-   * 当前百分比
-   * @author  韦胜健
-   * @date    2022.12.10 15:42
-   */
-  const percent = computed(() => Number(((model.value == null ? 0 : Number(model.value)) / props.total).toFixed(2)));
-
-  /**
-   * 进度条行内样式
-   * @author  韦胜健
-   * @date    2022.12.10 15:42
-   */
-  const progressStyles = useStyles((styles) => {
-    if (!totalLength.value) {return;}
-    let percentValue = percent.value;
-    if (percentValue === 1) {
-      /*当没有缩放或者缩放为1时，奇怪的是progress会缩小一点，这里让其不能等于1*/
-      percentValue = 0.99;
-    }
-    if (!props.vertical) {
-      styles.transform = `scaleX(${percentValue})`;
-      styles.transformOrigin = props.alignEnd ? 'right' : 'left';
-    } else {
-      styles.transform = `scaleY(${percentValue})`;
-      styles.transformOrigin = props.alignEnd ? 'bottom' : 'top';
-    }
-  });
-
-  /**
-   * 指示器行内样式
-   * @author  韦胜健
-   * @date    2022.12.10 15:42
-   */
-  const dotStyles = useStyles((styles) => {
-    styles.width = unit(props.size);
-    styles.height = unit(props.size);
-    let length = Number(!props.alignEnd ? percent.value : 1 - Number(percent.value)) * totalLength.value;
-    if (!props.vertical) {
-      styles.transform = `translateX(${length}px)`;
-    } else {
-      styles.transform = `translateY(${length}px)`;
-    }
-  });
-
-  /**
-   * 指示器拖拽行为
-   * @author  韦胜健
-   * @date    2022.12.10 15:42
-   */
-  const dotDraggier = useSliderDotDraggier(
-    hooks,
-    () => Number(percent.value),
-    ({ durY, durX, state: percent }) => {
-      const durValue = !props.vertical ? durX : durY;
-      const newPercent = Math.max(0, Math.min(1, percent + (durValue * (props.alignEnd ? -1 : 1) / totalLength.value)));
-      let newValue = Number((newPercent * props.total).toFixed(props.integer ? 0 : 2));
-      model.value = utils.checkValue(newValue);
-    }
-  );
-
-  /**
-   * 指示器显示的tooltip文本
-   * @author  韦胜健
-   * @date    2022.12.10 15:43
-   */
-  const tooltipLabel = computed(() => {
-    let ret = model.value;
-    return !!props.tooltipFormatter ? props.tooltipFormatter(ret || 0) : ret;
-  });
-
-  /**
-   * 拖拽的时候一直显示tooltip
-   * @author  韦胜健
-   * @date    2022.12.10 15:43
-   */
-  effects.push(hooks.onClasses.use(classList => {
-    if (dotDraggier.isDragging.value) {
-      classList.push('slider-dragging');
-    }
-  }));
-
-  /**
-   * 拖拽结束的时候处理emitImmediate
-   * @author  韦胜健
-   * @date    2022.12.10 15:43
-   */
-  effects.push(hooks.onDragend.use(() => {
-    if (!props.emitImmediate && model.value !== props.modelValue) {
-      event.emit.onUpdateModelValue(model.value);
-    }
-  }));
-
-  /**
-   * 渲染progress
-   * @author  韦胜健
-   * @date    2022.12.10 15:43
-   */
-  effects.push(hooks.onRender.use(list => {
-    list.push({
-      seq: 1,
-      key: 'progress',
-      render: () => (
-        <div className="slider-progress" style={progressStyles.value}/>
-      )
-    });
-  }));
-
-  /**
-   * 渲染指示器
-   * @author  韦胜健
-   * @date    2022.12.10 15:43
-   */
-  effects.push(hooks.onRender.use(list => {
-    list.push({
-      seq: 2,
-      key: 'dot',
-      render: () => (
-        <div className="slider-dot-wrapper">
-          <div className="slider-dot" style={dotStyles.value}>
-            {!!props.tooltip && <span className="slider-dot-tooltip">{tooltipLabel.value}</span>}
-            <div className="slider-dot-inner" onMouseDown={editComputed.value.editable ? dotDraggier.onMousedown : undefined}/>
-          </div>
-        </div>
-      )
-    });
-  }));
-
-  return effects.clear;
-}
+import {iSliderPublicParams} from "./slider.utils";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {computed, useModel, useStyles} from "plain-design-composition";
+import {unit} from "plain-utils/string/unit";
+import {useSliderDotDraggier} from "./useSliderDotDragier";
+
+export function useSliderSingle(
+  {
+    props,
+    event,
+    hooks,
+    totalLength,
+    utils,
+    editComputed,
+  }: iSliderPublicParams) {
+
+  const model = useModel(() => props.modelValue, event.emit.onUpdateModelValue, { autoEmit: props.emitImmediate });
+
+  const { effects } = createEffects();
+
+  /**
+   * 当前百分比
+   * @author  韦胜健
+   * @date    2022.12.10 15:42
+   */
+  const percent = computed(() => Number(((model.value == null ? 0 : Number(model.value)) / props.total).toFixed(2)));
+
+  /**
+   * 进度条行内样式
+   * @author  韦胜健
+   * @date    2022.12.10 15:42
+   */
+  const progressStyles = useStyles((styles) => {
+    if (!totalLength.value) {return;}
+    let percentValue = percent.value;
+    if (percentValue === 1) {
+      /*当没有缩放或者缩放为1时，奇怪的是progress会缩小一点，这里让其不能等于1*/
+      percentValue = 0.99;
+    }
+    if (!props.vertical) {
+      styles.transform = `scaleX(${percentValue})`;
+      styles.transformOrigin = props.alignEnd ? 'right' : 'left';
+    } else {
+      styles.transform = `scaleY(${percentValue})`;
+      styles.transformOrigin = props.alignEnd ? 'bottom' : 'top';
+    }
+  });
+
+  /**
+   * 指示器行内样式
+   * @author  韦胜健
+   * @date    2022.12.10 15:42
+   */
+  const dotStyles = useStyles((styles) => {
+    styles.width = unit(props.size);
+    styles.height = unit(props.size);
+    let length = Number(!props.alignEnd ? percent.value : 1 - Number(percent.value)) * totalLength.value;
+    if (!props.vertical) {
+      styles.transform = `translateX(${length}px)`;
+    } else {
+      styles.transform = `translateY(${length}px)`;
+    }
+  });
+
+  /**
+   * 指示器拖拽行为
+   * @author  韦胜健
+   * @date    2022.12.10 15:42
+   */
+  const dotDraggier = useSliderDotDraggier(
+    hooks,
+    () => Number(percent.value),
+    ({ durY, durX, state: percent }) => {
+      const durValue = !props.vertical ? durX : durY;
+      const newPercent = Math.max(0, Math.min(1, percent + (durValue * (props.alignEnd ? -1 : 1) / totalLength.value)));
+      let newValue = Number((newPercent * props.total).toFixed(props.integer ? 0 : 2));
+      model.value = utils.checkValue(newValue);
+    }
+  );
+
+  /**
+   * 指示器显示的tooltip文本
+   * @author  韦胜健
+   * @date    2022.12.10 15:43
+   */
+  const tooltipLabel = computed(() => {
+    let ret = model.value;
+    return !!props.tooltipFormatter ? props.tooltipFormatter(ret || 0) : ret;
+  });
+
+  /**
+   * 拖拽的时候一直显示tooltip
+   * @author  韦胜健
+   * @date    2022.12.10 15:43
+   */
+  effects.push(hooks.onClasses.use(classList => {
+    if (dotDraggier.isDragging.value) {
+      classList.push('slider-dragging');
+    }
+  }));
+
+  /**
+   * 拖拽结束的时候处理emitImmediate
+   * @author  韦胜健
+   * @date    2022.12.10 15:43
+   */
+  effects.push(hooks.onDragend.use(() => {
+    if (!props.emitImmediate && model.value !== props.modelValue) {
+      event.emit.onUpdateModelValue(model.value);
+    }
+  }));
+
+  /**
+   * 渲染progress
+   * @author  韦胜健
+   * @date    2022.12.10 15:43
+   */
+  effects.push(hooks.onRender.use(list => {
+    list.push({
+      seq: 1,
+      key: 'progress',
+      render: () => (
+        <div className="slider-progress" style={progressStyles.value}/>
+      )
+    });
+  }));
+
+  /**
+   * 渲染指示器
+   * @author  韦胜健
+   * @date    2022.12.10 15:43
+   */
+  effects.push(hooks.onRender.use(list => {
+    list.push({
+      seq: 2,
+      key: 'dot',
+      render: () => (
+        <div className="slider-dot-wrapper">
+          <div className="slider-dot" style={dotStyles.value}>
+            {!!props.tooltip && <span className="slider-dot-tooltip">{tooltipLabel.value}</span>}
+            <div className="slider-dot-inner" onMouseDown={editComputed.value.editable ? dotDraggier.onMousedown : undefined}/>
+          </div>
+        </div>
+      )
+    });
+  }));
+
+  return effects.clear;
+}

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

@@ -1,66 +1,66 @@
-import {createEffects} from "plain-utils/utils/createEffects";
-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,
-  getInitialState: () => InitialState,
-  handleDraggier: (data: { durX: number, durY: number, state: InitialState }) => void,
-) {
-
-  const { effects: draggierEffects } = createEffects();
-
-  let staticState = null as null | {
-    start: {
-      x: number,
-      y: number
-    },
-    state: InitialState,
-  };
-
-  const isDragging = reactive({ value: false });
-
-  const handler = {
-    onMousedown: (e: iMouseEvent) => {
-      const { clientX, clientY } = ClientZoom.getClientPosition(e);
-      staticState = {
-        start: {
-          x: clientX,
-          y: clientY,
-        },
-        state: getInitialState(),
-      };
-      window.addEventListener('mousemove', handler.onMousemove);
-      window.addEventListener('mouseup', handler.onMouseup);
-      draggierEffects.push(() => {window.removeEventListener('mousemove', handler.onMousemove);});
-      draggierEffects.push(() => {window.removeEventListener('mouseup', handler.onMouseup);});
-
-      disabledUserSelect();
-      draggierEffects.push(() => enableUserSelect());
-
-      isDragging.value = true;
-      draggierEffects.push(() => {isDragging.value = false;});
-
-      draggierEffects.push(() => hooks.onDragend.exec(undefined));
-    },
-    onMousemove: (e: MouseEvent) => {
-      if (!staticState) {return;}
-      const { clientX, clientY } = ClientZoom.getClientPosition(e);
-      const durX = clientX - staticState.start.x;
-      const durY = clientY - staticState.start.y;
-      handleDraggier({
-        durX,
-        durY,
-        state: staticState.state,
-      });
-    },
-    onMouseup: () => {
-      draggierEffects.clear();
-    },
-  };
-
-  return { onMousedown: handler.onMousedown, isDragging };
-}
+import {createEffects} from "plain-utils/utils/createEffects";
+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,
+  getInitialState: () => InitialState,
+  handleDraggier: (data: { durX: number, durY: number, state: InitialState }) => void,
+) {
+
+  const { effects: draggierEffects } = createEffects();
+
+  let staticState = null as null | {
+    start: {
+      x: number,
+      y: number
+    },
+    state: InitialState,
+  };
+
+  const isDragging = reactive({ value: false });
+
+  const handler = {
+    onMousedown: (e: iMouseEvent) => {
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      staticState = {
+        start: {
+          x: clientX,
+          y: clientY,
+        },
+        state: getInitialState(),
+      };
+      window.addEventListener('mousemove', handler.onMousemove);
+      window.addEventListener('mouseup', handler.onMouseup);
+      draggierEffects.push(() => {window.removeEventListener('mousemove', handler.onMousemove);});
+      draggierEffects.push(() => {window.removeEventListener('mouseup', handler.onMouseup);});
+
+      disabledUserSelect();
+      draggierEffects.push(() => enableUserSelect());
+
+      isDragging.value = true;
+      draggierEffects.push(() => {isDragging.value = false;});
+
+      draggierEffects.push(() => hooks.onDragend.exec(undefined));
+    },
+    onMousemove: (e: MouseEvent) => {
+      if (!staticState) {return;}
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      const durX = clientX - staticState.start.x;
+      const durY = clientY - staticState.start.y;
+      handleDraggier({
+        durX,
+        durY,
+        state: staticState.state,
+      });
+    },
+    onMouseup: () => {
+      draggierEffects.clear();
+    },
+  };
+
+  return { onMousedown: handler.onMousedown, isDragging };
+}

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 "plain-utils/dom/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;
+  }
+}

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

@@ -0,0 +1,36 @@
+import './space.scss';
+import {designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+
+export const Space = designComponent({
+  name: 'space',
+  props: {
+    vertical: { type: Boolean },
+    inlineBlock: { type: Boolean },
+    align: { type: String as PropType<'left' | 'center' | 'right'> },
+    ...StyleProps,
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const { styleComputed } = useStyle();
+
+    const classes = useClasses(() => [
+      getComponentCls('space'),
+      `space-${props.vertical ? 'vertical' : 'horizontal'}`,
+      `space-size-${styleComputed.value.size}`,
+      {
+        'space-inline-block': props.inlineBlock,
+        [`space-align-${props.align}`]: !!props.align,
+      }
+    ]);
+
+    return () => (
+      <div className={classes.value}>
+        {slots.default()}
+      </div>
+    );
+  },
+});
+
+export default Space;