plain-design 1.0.0-beta.12 → 1.0.0-beta.120

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

@@ -0,0 +1,191 @@
+import {computed, CSSProperties, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, reactive, useClasses, useModel, useRefs} from "@peryl/react-compose";
+import './sort-list.scss';
+import {createEffects} from "@peryl/utils/createEffects";
+import {addWindowListener} from "@peryl/utils/addWindowListener";
+import {getRectAutoFormat} from "@peryl/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;
+  }
+}

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

@@ -0,0 +1,36 @@
+import './space.scss';
+import {designComponent, getComponentCls, PropType, useClasses} from "@peryl/react-compose";
+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;

package/src/packages/components/Space/space.scss

@@ -0,0 +1,39 @@
+@include comp(space) {
+
+  display: flex;
+
+  @include sizeMixin(space, ()) {
+    &.space-horizontal {
+      & > * + * {
+        margin-left: plv(#{margin-#{$name}});
+      }
+    }
+    &.space-vertical {
+      & > * + * {
+        margin-top: plv(#{margin-#{$name}});
+      }
+    }
+  }
+
+  &.space-horizontal {
+    flex-direction: row;
+  }
+
+  &.space-vertical {
+    flex-direction: column;
+  }
+
+  &.space-inline-block {
+    display: inline-block;
+  }
+
+  &.space-align-left {
+    text-align: left
+  }
+  &.space-align-center {
+    text-align: center
+  }
+  &.space-align-right {
+    text-align: right
+  }
+}