plain-design 1.0.0-beta.145 → 1.0.0-beta.147

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

@@ -1,191 +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>
-    );
-  },
-});
+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

@@ -1,11 +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;
-  }
-}
+@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

@@ -1,36 +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;
+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

@@ -1,39 +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
-  }
-}
+@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
+  }
+}