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

package/src/packages/utils/getDeviceInfo.ts

@@ -9,50 +9,50 @@ interface iDeviceInfo {
   osType: typeof eOsType.TYPE,
 }
 
-export const getDeviceInfo = (() => {
-  let info: iDeviceInfo | null = null;
-
-  return () => {
-    if (isSSR()) {
-      throw new Error('服务端渲染的情况下不可以获取设备信息');
-    }
-    if (!info) {
-      const userAgent = navigator.userAgent;
-
-      info = {
-        deviceType: (() => {
-          const isMobile = /Mobile|Android|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
-          if (isMobile) {
-            return eDeviceType.mobile;
-          }
-          if (/iPad|Android/i.test(userAgent) && !isMobile) {
-            return eDeviceType.tablet;
-          }
-          return eDeviceType.desktop;
-        })(),
-        osType: (() => {
-          if (/Win/i.test(userAgent)) {
-            return eOsType.win;
-          }
-          if (/Mac/i.test(userAgent)) {
-            return eOsType.mac;
-          }
-          if (/Linux/i.test(userAgent)) {
-            return eOsType.linux;
-          }
-          if (/iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream) {
-            return eOsType.ios;
-          }
-          if (/Android/.test(userAgent)) {
-            return eOsType.android;
-          }
-          return 'unknown';
-        })()
-      };
-    }
-    return info;
-  };
-})();
+let info: iDeviceInfo | null = null;
+
+export const getDeviceInfo = () => {
+  if (isSSR()) {
+    throw new Error('服务端渲染的情况下不可以获取设备信息');
+  }
+  if (!info) {
+    const userAgent = navigator.userAgent;
+
+    info = {
+      deviceType: (() => {
+        const isMobile = /Mobile|Android|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+        if (isMobile) {
+          return eDeviceType.mobile;
+        }
+        if (/iPad|Android/i.test(userAgent) && !isMobile) {
+          return eDeviceType.tablet;
+        }
+        return eDeviceType.desktop;
+      })(),
+      osType: (() => {
+        if (/Win/i.test(userAgent)) {
+          return eOsType.win;
+        }
+        if (/Mac/i.test(userAgent)) {
+          return eOsType.mac;
+        }
+        if (/Linux/i.test(userAgent)) {
+          return eOsType.linux;
+        }
+        if (/iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream) {
+          return eOsType.ios;
+        }
+        if (/Android/.test(userAgent)) {
+          return eOsType.android;
+        }
+        return 'unknown';
+      })()
+    };
+  }
+  return info;
+};
+
+export const clearDeviceInfo = () => {info = null;};
 
 export const isPC = () => getDeviceInfo().deviceType === eDeviceType.desktop;
 

package/src/packages/utils/getRectAutoFormat.ts

@@ -0,0 +1,9 @@
+export function getRectAutoFormat(el: HTMLElement) {
+  const { top, left, height, width } = el.getBoundingClientRect();
+  return {
+    top: Number(top.toFixed(0)),
+    left: Number(left.toFixed(0)),
+    height: Number(height.toFixed(0)),
+    width: Number(width.toFixed(0)),
+  };
+}

package/src/packages/utils/inheritSlots.ts

@@ -0,0 +1,28 @@
+import {RenderNode} from "plain-design-composition";
+
+export function inheritSlots<
+  Slots extends Record<string, (() => RenderNode) & { isExist: () => boolean }>,
+  ScopeSlots extends Record<string, ((...args: any[]) => RenderNode) & { isExist: () => boolean }>,
+>(
+  {
+    slots,
+    scopeSlots,
+    defaultSlots,
+    defaultScopeSlots,
+  }: {
+    slots?: Slots,
+    scopeSlots?: ScopeSlots,
+    defaultSlots?: { [k in keyof Slots]: Omit<Slots[k], 'isExist'> },
+    defaultScopeSlots?: { [k in keyof ScopeSlots]: Omit<ScopeSlots[k], 'isExist'> },
+  }
+) {
+  const ret = {} as any;
+
+  !!defaultSlots && Object.entries(defaultSlots).forEach(([key, val]) => {ret[key] = val;});
+  !!defaultScopeSlots && Object.entries(defaultScopeSlots).forEach(([key, val]) => {ret[key] = val;});
+
+  !!slots && Object.keys(slots).forEach((k: keyof Slots) => {if (slots[k].isExist()) {ret[k] = () => slots[k]();}});
+  !!scopeSlots && Object.keys(scopeSlots).forEach((k: keyof ScopeSlots) => {if (scopeSlots[k].isExist()) {ret[k] = (...args: any[]) => scopeSlots[k](...args);}});
+
+  return ret;
+}

package/src/packages/utils/notNull.ts

@@ -0,0 +1,9 @@
+export function notNull<T, D>(val: T, defaultValue: D | (() => D)): Exclude<T, null | undefined> | D {
+  // @ts-ignore
+  return val != null ? val : (typeof defaultValue === "function" ? defaultValue() : defaultValue);
+}
+
+export function notNullFunction<T, D>(val: T, defaultValue: D): Exclude<T, null | undefined> | D {
+  // @ts-ignore
+  return val != null ? val : defaultValue;
+}

package/src/packages/utils/useMove.tsx

@@ -1,6 +1,7 @@
 import {createEffects} from "plain-utils/utils/createEffects";
 import {watch} from "plain-design-composition";
 import {removeUnit} from "plain-utils/string/removeUnit";
+import {ClientZoom} from "../components/ClientZoom";
 
 export function useMove(
   {
@@ -26,6 +27,8 @@ export function useMove(
 
   const onMousedown = (e: MouseEvent) => {
 
+    const { clientX, clientY } = ClientZoom.getClientPosition(e);
+
     const { effects: draggierEffects } = createEffects();
 
     const el = e.currentTarget as HTMLElement;
@@ -35,16 +38,19 @@ export function useMove(
     const dragState = {
       isDragging: false,
       start: {
-        x: e.clientX,
-        y: e.clientY,
+        x: clientX,
+        y: clientY,
         left: Number(removeUnit(style.left) || 0),
         top: Number(removeUnit(style.top) || 0),
       }
     };
 
     const onMousemove = (e: MouseEvent) => {
-      const durX = e.clientX - dragState.start.x;
-      const durY = e.clientY - dragState.start.y;
+
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+
+      const durX = clientX - dragState.start.x;
+      const durY = clientY - dragState.start.y;
 
       if (!dragState.isDragging) {
         if (durX >= 5 || durY >= 5) {

package/src/packages/components/CarouselGroup/carousel.scss

@@ -1,143 +0,0 @@
-@include prefix(carousel-group) {
-  position: relative;
-
-  &:not(.carousel-vertical) {
-    overflow-x: hidden;
-  }
-
-  .#{componentName(carousel)}, .carousel-cover, .carousel-operator, .carousel-indicator {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-
-    &.carousel-cover, &.carousel-operator, &.carousel-indicator {
-      z-index: 99;
-    }
-  }
-
-  .#{componentName(carousel)} {
-    &.carousel-animating {
-      transition: transform ease 600ms;
-    }
-
-    pointer-events: auto;
-  }
-
-  .carousel-cover {
-    pointer-events: auto;
-  }
-
-  .carousel-operator {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 20px;
-
-    .carousel-operator-btn {
-      transition: background-color 300ms linear;
-      cursor: pointer;
-      pointer-events: auto;
-      background-color: rgba(#ffffff, 0.45);
-      color: white;
-      width: 36px;
-      height: 36px;
-      border-radius: 36px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      user-select: none;
-
-      &:hover:not(:active) {
-        background-color: rgba(#ffffff, 0.65);
-      }
-    }
-  }
-
-  .carousel-indicator {
-    top: initial;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    flex-wrap: nowrap;
-
-    .carousel-indicator-item {
-      pointer-events: auto;
-      width: 20px;
-      height: 2px;
-      background-color: plv(background-color);
-      opacity: 0.6;
-      transition: all 200ms linear;
-      cursor: pointer;
-
-      &:not(:last-child) {
-        margin-right: 8px;
-      }
-
-      &.carousel-indicator-item-active {
-        opacity: 1;
-        width: 30px;
-        height: 4px;
-      }
-
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-  }
-
-  &.carousel-vertical {
-    overflow-y: hidden;
-
-    .carousel-operator {
-      flex-direction: column;
-      padding: 20px;
-      align-items: flex-end;
-
-      .carousel-operator-btn:nth-child(1) {
-        transform: rotate(90deg);
-      }
-
-      .carousel-operator-btn:nth-child(2) {
-        transform: rotate(90deg);
-      }
-    }
-
-    .carousel-indicator {
-      flex-direction: column;
-      padding: 20px 36px;
-      left: initial;
-      top: 0;
-
-      .carousel-indicator-item {
-        height: 8px;
-        width: 2px;
-        margin-right: 0;
-
-        &.carousel-indicator-item-active {
-          height: 16px;
-          width: 4px;
-        }
-
-        &:not(:last-child) {
-          margin-bottom: 4px;
-        }
-      }
-    }
-  }
-
-  &.carousel-card {
-    .#{componentName(carousel)} {
-      right: initial;
-    }
-
-    .carousel-indicator {
-      .carousel-indicator-item {
-        background-color: rgba(black, 0.5);
-      }
-    }
-  }
-}

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

@@ -1,274 +0,0 @@
-import {classnames, computed, designComponent, getComponentCls, onMounted, reactive, useClasses, useCollect, useModel, useRefs, useStyles, watch} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
-import {throttle} from "plain-utils/utils/throttle";
-import Icon from "../Icon";
-import {Carousel} from "../Carousel";
-import './carousel.scss';
-
-export const CarouselGroup = designComponent({
-  name: 'carousel-group',
-  props: {
-    modelValue: { type: [String, Number] },                       // 双向绑定值
-    height: { type: [Number, String], default: 225 },             // 轮播高度
-    autoplay: { type: Number, default: 3000 },                    // 自定播放时间，为0则取消自动播放
-    disabledOperator: { type: Boolean },                          // 禁用前后按钮
-    disabledIndicator: { type: Boolean },                         // 禁用指示器
-    indicatorTrigger: { type: String, default: 'click' },         // 指示器激活触发器：click。hover
-    vertical: { type: Boolean },                                  // 轮播方向为纵向
-    card: { type: Boolean },                                      // 卡片形式的切换
-    cardScale: { type: Number, default: 0.64 },                   // 卡片形式轮播的时候，缩小比例
-  },
-  inheritPropsType: HTMLDivElement,
-  scopeSlots: {
-    indicator: (scope: { val: string, index: number, active: boolean }) => {},
-  },
-  slots: ['cover', 'default'],
-  emits: {
-    onUpdateModelValue: (val: string | number | undefined | null) => true,
-  },
-  setup({ props, slots, scopeSlots, event: { emit } }) {
-
-    /*子元素*/
-    const items = CarouselCollector.parent();
-
-    const { refs, onRef } = useRefs({
-      el: HTMLDivElement
-    });
-    const state = reactive({
-      width: 0,                                                   // 容器宽度
-      height: 0,                                                  // 容器高度
-      autoplayTimer: null as null | number,                       // 自动播放定时器
-      prevActiveIndex: null as null | number,                     // 上一个激活的index，当元素个数为3时，需要通过这个属性优化动画
-    });
-
-    /*双向绑定值*/
-    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
-    /*子元素val数组*/
-    const vals = computed(() => items.map(item => String(item.itemVal)!));
-    /*当前激活的元素的val值*/
-    const activeVal = computed(() => {
-      if (vals.value.length === 0) {
-        return null;
-      }
-      if (model.value != null) {
-        return String(model.value);
-      } else {
-        return vals.value[0];
-      }
-    });
-    /*当前激活的元素的val的在 数组中的索引*/
-    const activeIndex = computed(() => {
-      if (!activeVal.value) {
-        return 0;
-      }
-      return vals.value.indexOf(activeVal.value);
-    });
-
-    /*实际渲染的，排序过的val数组*/
-    const sortVals = computed(() => {
-      const valArray = vals.value;
-      let prev = valArray.slice(0, activeIndex.value);
-      let next = valArray.slice(activeIndex.value + 1);
-
-      if (Math.abs(prev.length - next.length) > 1) {
-        if (prev.length > next.length) {
-          while (prev.length - next.length > 1) {
-            next.push(prev.shift()!);
-          }
-        } else {
-          while (next.length - prev.length > 1) {
-            prev.unshift(next.pop()!);
-          }
-        }
-      }
-      return [...prev, activeVal.value, ...next];
-    });
-
-    const classes = useClasses(() => [
-      getComponentCls('carousel-group'),
-      {
-        'carousel-vertical': props.vertical,
-        'carousel-card': props.card,
-      }
-    ]);
-    const styles = useStyles(style => {
-      style.height = unit(props.height);
-    });
-
-    const utils = {
-      /**
-       * 子元素的左偏移位置
-       * @author  韦胜健
-       * @date    2020/11/22 23:19
-       */
-      getItemStyles: (val: any) => {
-        if (!state.width) {
-          return null;
-        }
-        /*当前val在sortVals中的索引*/
-        const sortIndex = sortVals.value.indexOf(String(val));
-        /*激活val在sortVals中的索引*/
-        const activeSortIndex = sortVals.value.indexOf(String(activeVal.value));
-
-        /*当前val与激活val在sortVal的间距*/
-        let duration = sortIndex - activeSortIndex;
-
-        const style = {
-          zIndex: sortVals.value.length - Math.abs(duration),
-        } as any;
-
-        if (!props.vertical) {
-          if (!props.card) {
-            /*非卡片形式的轮播*/
-            style.transform = `translateX(${duration * state.width}px)`;
-          } else {
-            style.width = `${props.cardScale * 100}%`;
-            style.height = `${props.cardScale * 100}%`;
-
-            /*卡片轮播*/
-            let left = duration * state.width * (props.cardScale) + (state.width * (1 - props.cardScale) / 2);
-            left += (sortIndex > activeSortIndex ? -1 : 1) * Math.abs(sortIndex - activeSortIndex) * state.width * 0.125;
-            style.transform = `translateX(${left}px) translateY(${state.height * ((1 - props.cardScale) / 2)}px) scale(${sortIndex === activeSortIndex ? '1' : '0.83'})`;
-          }
-        } else {
-          /*纵向非卡片形式的轮播*/
-          style.transform = `translateY(${duration * state.height}px)`;
-        }
-
-        return style;
-      },
-      /**
-       * 重置自动播放定时器
-       * @author  韦胜健
-       * @date    2020/11/22 23:19
-       */
-      resetAutoplayTimer: (autoplay: number | null) => {
-        /*无论怎么样都要清理掉定时器*/
-        if (!!state.autoplayTimer) {
-          clearInterval(state.autoplayTimer);
-          state.autoplayTimer = null;
-        }
-        /*如果autoplay有值，重新设定一个自动播放定时器*/
-        if (!!autoplay) {
-          state.autoplayTimer = setInterval(methods.next, autoplay) as any as number;
-        }
-      },
-      /**
-       * 子元素是否需要动画（当元素为3时，只有prevActiveIndex以及activeIndex的元素需要动画，另一个需要立刻移动到对应的位置）
-       * @author  韦胜健
-       * @date    2020/11/22 23:20
-       */
-      isAnimating: (val: any) => {
-        if (vals.value.length !== 3 && !props.card) {
-          return true;
-        }
-        let index = vals.value.indexOf(val);
-        return index === state.prevActiveIndex || index === activeIndex.value;
-      },
-    };
-
-    const methods = {
-      /**
-       * 显示上一个元素
-       * @author  韦胜健
-       * @date    2020/11/22 23:21
-       */
-      prev: () => {
-        state.prevActiveIndex = activeIndex.value;
-        model.value = sortVals.value[sortVals.value.indexOf(activeVal.value) - 1]!;
-      },
-      /**
-       * 显示下一个元素
-       * @author  韦胜健
-       * @date    2020/11/22 23:21
-       */
-      next: () => {
-        state.prevActiveIndex = activeIndex.value;
-        model.value = sortVals.value[sortVals.value.indexOf(activeVal.value) + 1]!;
-      },
-      /**
-       * 显示特定元素
-       * @author  韦胜健
-       * @date    2020/11/22 23:21
-       */
-      show: (val: any) => {
-        state.prevActiveIndex = activeIndex.value;
-        model.value = val;
-
-        utils.resetAutoplayTimer(props.autoplay);
-      },
-    };
-
-    const handler = {
-      onPrev: throttle(() => {
-        utils.resetAutoplayTimer(props.autoplay);
-        methods.prev();
-      }, 500, { trailing: true, leading: true }),
-      onNext: throttle(() => {
-        utils.resetAutoplayTimer(props.autoplay);
-        methods.next();
-      }, 500, { trailing: true, leading: true }),
-      onIndicator: (index: number) => {
-        methods.show(vals.value[index]);
-      },
-    };
-
-    onMounted(() => {
-      state.width = refs.el!.offsetWidth;
-      state.height = refs.el!.offsetHeight;
-    });
-
-    watch(() => props.autoplay, utils.resetAutoplayTimer, { immediate: true });
-
-    return {
-      refer: {
-        refs,
-        utils,
-        methods,
-      },
-      render: () => (
-        <div className={classes.value} style={styles.value} ref={onRef.el}>
-          {slots.default()}
-          {slots.cover.isExist() && <div className="carousel-cover">
-            {slots.cover()}
-          </div>}
-
-          {!props.disabledOperator && <div className="carousel-operator">
-            <div className="carousel-operator-btn carousel-operator-prev" onClick={handler.onPrev}>
-              <Icon icon="pi-left"/>
-            </div>
-            <div className="carousel-operator-btn carousel-operator-next" onClick={handler.onNext}>
-              <Icon icon="pi-right"/>
-            </div>
-          </div>}
-
-          {!props.disabledIndicator && <div className="carousel-indicator">
-            {items.map((item, index) => (
-              scopeSlots.indicator({ val: String(item.itemVal), index, active: index === activeIndex.value }, (
-                <div
-                  {...{
-                    [props.indicatorTrigger === 'hover' ? 'onMouseEnter' : 'onClick']: () => handler.onIndicator(index)
-                  }}
-                  className={classnames(
-                    [
-                      'carousel-indicator-item',
-                      {
-                        'carousel-indicator-item-active': index === activeIndex.value,
-                      }
-                    ]
-                  )} key={index}/>
-              ))
-            ))}
-          </div>}
-        </div>
-      )
-    };
-  },
-});
-
-export default CarouselGroup;
-
-export const CarouselCollector = useCollect(() => ({
-  parent: CarouselGroup,
-  child: Carousel,
-}));