plain-design 1.0.0-beta.9 → 1.0.0-beta.91

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
+  }
+}

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

@@ -0,0 +1,416 @@
+import {CSSProperties, designComponent, getComponentCls, iHTMLDivElement, isReact, mergeAttrs, onBeforeUnmount, onMounted, PropType, reactive, useClasses, useModel, useRefs} from "plain-design-composition";
+import './stack-card.scss';
+import {findReactElement} from "../../utils/findReactElement";
+import StackCardItem from "../StackCardItem";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {delay} from "plain-utils/utils/delay";
+import {addWindowListener} from "plain-utils/dom/addWindowListener";
+
+export const StackCard = designComponent({
+  name: 'stack-card',
+  props: {
+    modelValue: { type: [String, Number] },                                                         // 双向绑定值，当前显示哪一个子节点
+    prevBufferCount: { type: Number },                                                              // 左/上侧显示元素个数
+    nextBufferCount: { type: Number },                                                              // 右/下侧显示元素个数, 这个包含当前显示的元素，所以这个nextBufferCount不能小于1
+    stackItemWidth: { type: Number, default: 24 },                                                  // 每一张折叠卡片横向偏移距离
+    stackItemHeight: { type: Number, default: 12 },                                                 // 每一张折叠卡片纵向向偏移距离
+    scaleRate: { type: Number, default: 0.1 },                                                      // 每一张折叠卡片缩放比例
+    demandRender: { type: Boolean },                                                                // 按需渲染内容，当卡片没有展示的时候不渲染内容
+    flick: { type: Boolean },                                                                       // 轻拂模式，拖拽的时候不会触发卡片滚动，松开的时候才会触发切换，如果卡片内容有复杂的内容比如表单因为transform变化显示异常的情况下可以启用这个属性
+
+    vertical: { type: Boolean },                                                                    // 设置为true之后，开启纵向切换
+    verticalOffset: { type: Boolean },                                                              // 横向切换下有效，开启纵向偏移
+    verticalAlign: { type: String as PropType<'top' | 'center' | 'bottom'>, default: 'center' },    // 横向切换下有效，纵向对齐方式
+  },
+  emits: {
+    onUpdateModelValue: (val?: string | number) => true,
+  },
+  slots: ['default'],
+  setup({ props, slots, event: { emit } }) {
+
+    const { effects } = createEffects();
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement, container: iHTMLDivElement });
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { onChange: async () => {await utils.resetData();} });
+
+    const classes = useClasses(() => [
+      getComponentCls('stack-card'),
+      `stack-card-direction-${props.vertical ? 'vertical' : 'horizontal'}`,
+      {
+        'stack-card-touching': draggier.draggierState.touching,
+      }
+    ]);
+
+    const draggier = (() => {
+
+      /**
+       * 拖拽响应式状态
+       * @author  韦胜健
+       * @date    2024/2/1 14:34
+       * @param   lot 缩写，left or top
+       * @param   touching, 当前是否处于拖拽状态
+       */
+      const draggierState = reactive({ lot: 0, touching: false, });
+
+      const touchstart = (e: TouchEvent | MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        let staticState = {
+          /*拖拽开始时的left or top*/
+          startLot: draggierState.lot,
+          /*拖拽开始时触点的x轴以及y轴位置*/
+          ...'touches' in e ? {
+            startX: e.touches[0].clientX,
+            startY: e.touches[0].clientY,
+          } : {
+            startX: e.clientX,
+            startY: e.clientY,
+          },
+          moveX: 0,
+          moveY: 0
+        };
+        const { effects: draggierEffects } = createEffects();
+
+        const touchmove = (e: TouchEvent | MouseEvent) => {
+
+          Object.assign(
+            staticState,
+            'touches' in e
+              ? {
+                moveX: e.touches[0].clientX,
+                moveY: e.touches[0].clientY
+              }
+              : {
+                moveX: e.clientX,
+                moveY: e.clientY
+              }
+          );
+
+          let { durX, durY } = {
+            durX: staticState.moveX - staticState.startX,
+            durY: staticState.moveY - staticState.startY
+          };
+
+          if (!draggierState.touching) {
+            /*横向切换状态下，横向移动距离超过10个像素*/
+            /*或者纵向切换状态下，纵向移动距离超过10个像素*/
+            if ((!props.vertical && Math.abs(durX) > 10) || (props.vertical && Math.abs(durY) > 10)) {
+              draggierState.touching = true;
+              draggierEffects.push(() => {
+                draggierState.touching = false;
+                if (!props.flick) {
+                  if (!!renderData) {
+                    /**
+                     * 设置滚动位置为最近的子节点
+                     * @author  韦胜健
+                     * @date    2024/1/4 21:12
+                     */
+                    const { closestItem, itemsList, itemValList } = renderData;
+                    draggierState.lot = itemsList.find(
+                      (i) => i.index === closestItem.index
+                    )!.startLot;
+                    const newVal = itemValList[closestItem.index];
+                    if (newVal != model.value) {
+                      model.value = newVal;
+                      // delay(300).then(() => refreshItemArrowProvider.refresh());
+                    }
+                  }
+                } else {
+                  let activeIndex =
+                    model.value == null ? -1 : renderData.itemValList.indexOf(model.value);
+                  if (activeIndex == -1) {
+                    activeIndex = 0;
+                  }
+
+                  let index =
+                    ((): 1 | -1 => {
+                      if (!props.vertical) {
+                        return staticState.moveX > staticState.startX ? -1 : 1;
+                      } else {
+                        return staticState.moveY > staticState.startY ? -1 : 1;
+                      }
+                    })() + activeIndex;
+                  if (index < 0) {
+                    index = renderData.itemValList.length - 1;
+                  }
+                  if (index > renderData.itemValList.length - 1) {
+                    index = 0;
+                  }
+                  draggierState.lot = renderData.itemsList.find((i) => i.index === index)!.startLot;
+                  const newVal = renderData.itemValList[index];
+                  if (newVal != model.value) {
+                    model.value = newVal;
+                    // delay(300).then(() => refreshItemArrowProvider.refresh());
+                  }
+                }
+              });
+            }
+          }
+          if (!draggierState.touching) {
+            return;
+          }
+          if (!props.flick) {
+            /*实时设置滚动位置*/
+            durX = Math.ceil(durX / 3);
+            durY = Math.ceil(durY / 10);
+            draggierState.lot = !props.vertical
+              ? -durX + staticState.startLot
+              : -durY + staticState.startLot;
+          }
+        };
+
+        draggierEffects.push(addWindowListener('mousemove', touchmove));
+        draggierEffects.push(addWindowListener('mouseup', draggierEffects.clear));
+        draggierEffects.push(addWindowListener('touchmove', touchmove));
+        draggierEffects.push(addWindowListener('touchend', draggierEffects.clear));
+      };
+
+      return { draggierState, touchstart };
+    })();
+
+    const utils = {
+      /**
+       * 重新计算当前渲染信息数据
+       * @author  韦胜健
+       * @date    2024/1/4 21:13
+       */
+      resetData: async () => {
+        await delay();
+        const activeIndex = model.value == null ? -1 : renderData.itemValList.indexOf(model.value);
+        if (activeIndex === -1) {return;}
+        const newItem = renderData.itemsList.find(i => i.index === activeIndex);
+        if (!!newItem) {
+          draggier.draggierState.lot = renderData.itemsList.find(i => i.index === activeIndex)!.startLot;
+        }
+      },
+    };
+
+    onMounted(() => {
+      refs.el!.addEventListener('touchstart', draggier.touchstart);
+      refs.el!.addEventListener('mousedown', draggier.touchstart);
+      utils.resetData();
+    });
+
+    onBeforeUnmount(effects.clear);
+
+    let renderData = {
+      /*子节点信息，listLeft为子节点相对于o位置的偏移量*/
+      itemsList: [] as iStackItemDataMeta[],
+      /*子节点的val数组*/
+      itemValList: [] as (string | number)[],
+      /*子节点转换为循环列表的信息，distance为循环列表中元素距离选中元素的偏移量*/
+      listData: [] as (iStackItemDataMeta & { distance: number })[],
+      /*最靠近选中元素的节点数据*/
+      closestItem: {} as iStackItemDataMeta,
+    };
+
+    return () => {
+
+      const content = slots.default() as any;
+      /*从内容解析出来StackCardItem的数量及其props*/
+      const items: any[] = !content ? [] : findReactElement(content, (i: any) => i.type?.name === StackCardItem.name) || [];
+      const itemValList = items.map((i, index) => i.props?.val == null ? index : i.props?.val);
+      const total = items.length;
+
+      let prevBufferCount = props.prevBufferCount == null ? Math.ceil(total / 2) : props.prevBufferCount;
+      let nextBufferCount = props.nextBufferCount == null ? Math.ceil(total / 2) : props.nextBufferCount;
+
+      const elStyles = {} as CSSProperties;
+      if (!props.vertical) {
+        elStyles.paddingLeft = `${(prevBufferCount) * props.stackItemWidth}px`;
+        elStyles.paddingRight = `${(nextBufferCount - 1) * props.stackItemWidth}px`;
+        if (!!props.verticalOffset) {
+          elStyles.paddingBottom = `${Math.max(prevBufferCount, nextBufferCount - 1) * props.stackItemHeight}px`;
+        }
+      } else {
+        elStyles.paddingTop = `${(prevBufferCount) * props.stackItemHeight}px`;
+        elStyles.paddingBottom = `${(nextBufferCount - 1) * props.stackItemHeight}px`;
+        /*if (!!props.verticalOffset) {
+          elStyles.paddingBottom = `${Math.max(leftBufferCount, rightBufferCount - 1) * props.stackItemHeight}px`;
+        }*/
+      }
+
+      let itemStyles: CSSProperties[] = [];
+      const stackItemSize = !props.vertical ? props.stackItemWidth : props.stackItemHeight;
+
+      /*实际中拖拽的left距离，与item的startLeft匹配，item的startLeft实际上是item的中心距离*/
+      let pointLot = draggier.draggierState.lot;
+      /*拖拽的left距离向右偏移半个stackItemWidth得到offsetPointLeft, 通过offsetPointLeft在item的startLeft到endLeft之间的位置找到closetItem*/
+      let offsetPointLot = Math.floor(stackItemSize / 2 + pointLot);
+      /*计算每个item的startLeft以及endLeft*/
+      const itemsList: iStackItemDataMeta[] = itemValList.map((_, index) => ({ index, startLot: index * stackItemSize, endLot: (index + 1) * stackItemSize, }));
+
+      /*总长度*/
+      const maxEndLot = itemsList[itemsList.length - 1]?.endLot;
+
+      /*修正left，超出maxListLeft或者小于0时，循环计算left使其落在0到maxListLeft的范围*/
+      if (!!itemsList.length && !!maxEndLot) {
+        while (offsetPointLot > maxEndLot) {
+          offsetPointLot -= maxEndLot;
+          pointLot -= maxEndLot;
+        }
+        while (offsetPointLot < 0) {
+          offsetPointLot += maxEndLot;
+          pointLot += maxEndLot;
+        }
+      }
+
+      /*找到最靠近的位置*/
+      const closestItem = itemsList.reduce((prev, item) => {
+        if (item.startLot <= offsetPointLot && item.endLot >= offsetPointLot) {
+          return { distance: Math.abs(item.startLot - pointLot), item };
+        } else {
+          return prev;
+        }
+      }, { distance: Infinity, item: null } as { distance: number, item: iStackItemDataMeta | null }).item!;
+
+      /*循环列表前半部分*/
+      const prevItemsList = itemsList.slice(0, closestItem.index);
+      /*循环列表后半部分*/
+      const nextItemsList = itemsList.slice(closestItem.index);
+
+      /*根据左侧右侧预留的空位填补前后列表*/
+      while (prevItemsList.length - nextItemsList.length > 1) {nextItemsList.push(prevItemsList.shift()!);}
+      while (nextItemsList.length - prevItemsList.length > 1) {prevItemsList.unshift(nextItemsList.pop()!);}
+      while (prevItemsList.length > prevBufferCount) {
+        const shiftItem = prevItemsList.shift()!;
+        if (nextItemsList.length < nextBufferCount) {
+          nextItemsList.push(shiftItem);
+        }
+      }
+      while (nextItemsList.length > nextBufferCount) {
+        const popItem = nextItemsList.pop()!;
+        if (prevItemsList.length < prevBufferCount) {
+          prevItemsList.unshift(popItem);
+        }
+      }
+
+      /*此时后半部分的第一个元素就是选中的元素，索引就是前半部分列表的最后一个位置+1*/
+      const activeIndex = prevItemsList.length;
+      /*根据最靠近left的节点来计算当前的少量偏移*/
+      const offsetLot = closestItem.startLot - pointLot;
+      /*计算循环列表中每个节点距离选中节点的偏移距离*/
+      const list = [...prevItemsList, ...nextItemsList].map((item, index) => ({
+        ...item,
+        distance: (index - activeIndex) * stackItemSize,
+        zIndex: 0,
+      }));
+      /*先排序，然后根据顺序设置zIndex，最靠近left的节点zIndex最大*/
+      list.sort((a, b) => Math.abs(a.distance) - Math.abs(b.distance)).forEach((i, index) => {
+        i.zIndex = total - index;
+      });
+
+      const isPrevOfClosetItem = (index: number) => {
+        index = index + 1;
+        if (index >= total) {index = 0;}
+        return index === closestItem.index;
+      };
+      const isNextOfClosetItem = (index: number) => {
+        index = index - 1;
+        if (index < 0) {index = total - 1;}
+        return index === closestItem.index;
+      };
+
+      /*计算子节点样式*/
+      itemStyles = itemsList.map((_, index): CSSProperties => {
+        const item = list.find(i => i.index === index);
+        if (!item) {
+          const isPrevHidden = isPrevOfClosetItem(_.index);
+          const isNextHidden = !isPrevHidden && isNextOfClosetItem(_.index);
+
+          if (isPrevHidden) {
+            /*下一个就是closetItem，但是当前item隐藏,提前缩放以及进行位置偏移*/
+            return {
+              opacity: 0,
+              zIndex: total + 2,
+              pointerEvents: 'none',
+              transformOrigin: !props.vertical ? 'left' + (' ' + props.verticalAlign) : 'top',
+              transform: !props.vertical ?
+                `translate3d(${Math.ceil(-stackItemSize * 0.5)}px,0,0) scale(${1 - props.scaleRate / 2})` :
+                `translate3d(0,${Math.ceil(-stackItemSize * 0.5)}px,0) scale(${1 - props.scaleRate / 2})`
+            };
+          } else if (isNextHidden) {
+            /*上一个就是closetItem，但是当前item隐藏,提前缩放以及进行位置偏移*/
+            return {
+              opacity: 0,
+              zIndex: total + 2,
+              pointerEvents: 'none',
+              transformOrigin: !props.vertical ? 'right' + (' ' + props.verticalAlign) : 'bottom',
+              transform: !props.vertical ?
+                `translate3d(${Math.ceil(stackItemSize * 0.5)}px,0,0) scale(${1 - props.scaleRate / 2})` :
+                `translate3d(0,${Math.ceil(stackItemSize * 0.5)}px,0) scale(${1 - props.scaleRate / 2})`
+            };
+          } else {
+            /*不在前部分列表后部分列表的元素，可能是因为预留位置不足，这里不做显示*/
+            return {
+              opacity: 0,
+              transition: 'none'
+            };
+          }
+        }
+        /*元素的偏移距离*/
+        const lot = item.distance + offsetLot;
+        /*根据偏移距离实时计算缩放大小，越靠近left，越接近1*/
+        const scale = Math.max(0, 1 - Number((Math.abs(lot) / stackItemSize * props.scaleRate).toFixed(2)));
+
+        if (!props.vertical) {
+          return {
+            transform: `translate3d(${lot}px,${props.verticalOffset ? `${lot / props.stackItemWidth * props.stackItemHeight}px` : 0},0) scale(${scale})`,
+            transformOrigin: `${lot > 0 ? 'right' : 'left'} ${props.verticalAlign}`,
+            zIndex: item.zIndex,
+            // opacity: total - item.zIndex === 0 ? 1 : 0.75,
+          };
+        } else {
+          return {
+            transform: `translate3d(0,${lot}px,0) scale(${scale})`,
+            transformOrigin: `${lot > 0 ? 'bottom' : 'top'}`,
+            zIndex: item.zIndex,
+            // opacity: total - item.zIndex === 0 ? 1 : 0.75,
+          };
+        }
+      });
+
+      renderData = {
+        itemsList,
+        closestItem,
+        listData: list,
+        itemValList,
+      };
+
+      return (
+        <div className={classes.value} style={elStyles} ref={onRef.el}>
+          <div className="stack-card-container" ref={onRef.container}>
+            {items.map((Item: any, index: number) => {
+              const ItemComp = isReact ? Item.type : Item;
+              return (
+                <ItemComp
+                  {...mergeAttrs({ style: itemStyles[index] || {} }, Item.props)}
+                  destroyContent={(() => {
+                    if (!props.demandRender) {return false;}
+                    if (!props.vertical) {
+                      if (index === 0) {return false;}
+                    }
+                    if (isPrevOfClosetItem(index)) {return false;}
+                    if (isNextOfClosetItem(index)) {return false;}
+                    return !list.find(i => i.index === index);
+                  })()}
+                  key={index}
+                />
+              );
+            })}
+          </div>
+        </div>
+      );
+    };
+  },
+});
+
+export default StackCard;
+
+interface iStackItemDataMeta {
+  index: number,
+  startLot: number,
+  endLot: number
+}

package/src/packages/components/StackCard/stack-card.scss

@@ -0,0 +1,40 @@
+@include comp(stack-card) {
+  display: block;
+  box-sizing: border-box;
+
+  &.stack-card-direction-vertical {
+    height: 100%;
+
+    .stack-card-container {
+      height: 100%
+    }
+
+    @include comp(stack-card-item) {
+      height: 100%
+    }
+  }
+
+  .stack-card-container {
+    position: relative;
+    @include comp(stack-card-item) {
+      transition: transform linear 100ms, opacity linear 300ms;
+
+      &:not(:first-child) {
+        position: absolute;
+        inset: 0;
+      }
+      &:first-child {
+        position: relative;
+      }
+
+      & > img {
+        width: 100%;
+      }
+    }
+  }
+
+  &:not(.stack-card-touching) {
+    @include comp(stack-card-item) {
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import {designComponent, getComponentCls, useClasses} from "plain-design-composition";
+
+export const StackCardItem = designComponent({
+  name: 'stack-card-item',
+  props: {
+    val: { type: [String, Number] },
+    destroyContent: { type: Boolean }
+  },
+  slots: ['default'],
+  setup({ props, slots, event: { emit } }) {
+
+    const classes = useClasses(() => [
+      getComponentCls('stack-card-item')
+    ]);
+
+    return () => (
+      <div className={classes.value}>
+        {!props.destroyContent && slots.default()}
+      </div>
+    );
+  },
+});
+
+export default StackCardItem;