plain-design 1.0.0-beta.10 → 1.0.0-beta.101

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/onParentElementsScroll.tsx

@@ -1,5 +1,5 @@
 import {SimpleFunction} from "plain-design-composition";
-import {doNothing} from "./doNothing";
+import {doNothing} from "plain-utils/utils/doNothing";
 
 /**
  * 监听某个父节点滚动动作

package/src/packages/utils/plainDate.ts

@@ -192,8 +192,12 @@ const parse = (str: string | undefined | null, format: string) => {
  * @author  韦胜健
  * @date    2021/1/18 10:30
  */
-const today = (displayFormat: string, valueFormat: string) => {
+const today = (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
   return wrapDate(new Date(), { displayFormat, valueFormat });
 };
 
-export const plainDate = Object.assign(wrapDate, { defaultDate, format, parse, today, DayJs });
+const now = (displayFormat = 'YYYY-MM-DD HH:mm:ss', valueFormat = 'YYYY-MM-DD HH:mm:ss') => {
+  return wrapDate(new Date(), { displayFormat, valueFormat });
+};
+
+export const plainDate = Object.assign(wrapDate, { defaultDate, format, parse, today, now, DayJs });

package/src/packages/utils/renderInputModeTextRangeValue.tsx

@@ -0,0 +1,25 @@
+import {tStyleComputed} from "../uses/useStyle";
+import Icon from "../components/Icon";
+
+export const renderInputModeTextRangeValue = (
+  {
+    styleComputed,
+    startValue,
+    endValue,
+    defaultRender,
+  }: {
+    styleComputed: tStyleComputed,
+    startValue: any,
+    endValue: any,
+    defaultRender: () => any,
+  }) => {
+  if (styleComputed.value.inputMode !== 'text') {
+    return defaultRender();
+  } else {
+    return <>
+      {startValue != null && <span>{startValue}</span>}
+      <Icon icon="pi-arrow-right" className="input-mode-text-separate-icon"/>
+      {endValue != null && <span>{endValue}</span>}
+    </>;
+  }
+};

package/src/packages/utils/watchEffectAutoClear.ts

@@ -1,4 +1,5 @@
-import {onBeforeUnmount, SimpleFunction, watch} from "plain-design-composition";
+import {onBeforeUnmount, watch} from "plain-design-composition";
+import {createEffects} from "plain-utils/utils/createEffects";
 
 /**
  * watch函数封装，支持清理副作用
@@ -6,11 +7,22 @@ import {onBeforeUnmount, SimpleFunction, watch} from "plain-design-composition";
  * @date    2022.7.3 13:15
  */
 export function useWatchAutoClear<T>(watcher: () => T, handler: (newVal: T, oldVal: undefined | T) => (() => void)) {
-  let clear: SimpleFunction | null = null;
-  watch(() => watcher(), (newVal, oldVal) => {
-    clear?.();
-    clear = handler(newVal, oldVal);
-  }, { immediate: true });
 
-  onBeforeUnmount(() => clear?.());
+  const { effects: setupEffects } = createEffects();
+  const { effects: watchEffects } = createEffects();
+
+  setupEffects.push(
+    watch(() => watcher(), (newVal, oldVal) => {
+      watchEffects.clear();
+      watchEffects.push(
+        handler(newVal, oldVal)
+      );
+    }, { immediate: true })
+  );
+
+  onBeforeUnmount(() => {
+    setupEffects.clear();
+    watchEffects.clear();
+  });
 }
+

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,
-}));

package/src/packages/components/createProvider/index.ts

@@ -1,5 +0,0 @@
-import {createProvider} from "../../utils/createProvider";
-
-export {createProvider};
-
-export default createProvider;

package/src/packages/utils/createProvider.tsx

@@ -1,35 +0,0 @@
-import {designComponent, inject, PropType, provide} from "plain-design-composition";
-
-interface iInjection<T> {
-  (): T,
-
-  <D>(data: D): T | D,
-}
-
-export function createProvider<T>(provideKey: string) {
-
-  const Provider = designComponent({
-    props: {
-      value: { type: Object as PropType<T>, required: true }
-    },
-    slots: ['default'],
-    setup({ props, slots }) {
-      // @ts-ignore
-      !!props.value && provide(provideKey, props.value);
-      return () => slots.default();
-    },
-  });
-
-  return {
-    provideKey,
-    Provider,
-    provide: (context: T) => {
-      provide(provideKey, context);
-    },
-    inject: ((defaultData?: any) => inject(provideKey, defaultData)) as iInjection<T>,
-  };
-}
-
-// const AppProvider = createProvider<HTMLDivElement>('@@APP_PROVIDER');
-// const a = AppProvider.inject();           // HTMLDivElement，注入不到东西会报错
-// const b = AppProvider.inject(null);       // HTMLDivElement|null，注入不到东西会返回默认值

package/src/packages/utils/doNothing.ts

@@ -1,3 +0,0 @@
-import {SimpleFunction} from "plain-design-composition";
-
-export const doNothing: SimpleFunction = () => {/**/};

package/src/packages/utils/findParentElement.ts

@@ -1,12 +0,0 @@
-export function findParentElement(el: HTMLElement, isMatch: (parent: HTMLElement) => boolean): HTMLElement | null {
-  let parent = el.parentElement;
-  if (!parent) {
-    return null;
-  }
-  let count = 50;
-  while (!!parent && !isMatch(parent) && count > 0) {
-    count--;
-    parent = parent.parentElement;
-  }
-  return parent;
-}

package/src/packages/utils/formatServiceOptions.ts

@@ -1,7 +0,0 @@
-export function formatOptions<Option extends Record<string, any>>(sourceOption: string | Option, externalOption?: Option): Option {
-  const option = typeof sourceOption === "string" || typeof sourceOption === "number" ? { message: sourceOption } : sourceOption;
-  if (!!externalOption) {
-    Object.assign(option, externalOption);
-  }
-  return option as any;
-}

package/src/packages/utils/getElement.ts

@@ -1,17 +0,0 @@
-export function getElement(ref: any): HTMLElement | null {
-
-  if (!ref) {
-    return null;
-  }
-
-  if (!!ref.$el) {
-    return getElement(ref.$el);
-  }
-
-  if (ref.nodeType !== 3) {
-    return ref;
-  }
-
-  return !!ref.data ? ref : ref.nextElementSibling;
-
-}

package/src/packages/utils/getElementParents.ts

@@ -1,9 +0,0 @@
-export function getElementParents(el: HTMLElement) {
-  let val = el.parentElement;
-  let parents: (HTMLElement | null)[] = [val];
-  while (!!val) {
-    val = val.parentElement;
-    parents.push(val);
-  }
-  return parents;
-}

package/src/packages/utils/getScrollParent.ts

@@ -1,11 +0,0 @@
-/**
- * 获取可以滚动的父组件
- * @author  韦胜健
- * @date    2020/8/19 23:50
- */
-export function getScrollParent(el: HTMLElement): HTMLElement {
-  while (!!el && el.scrollHeight <= el.offsetHeight) {
-    el = el.parentNode as HTMLElement;
-  }
-  return el;
-}