plain-design 1.0.0-beta.5 → 1.0.0-beta.50

package/src/packages/components/Loading/loading.scss

@@ -1,5 +1,5 @@
-@include prefix(loading) {
-  @include statusMixin(loading) {
-    color: $color-6;
-  }
-}
+@include prefix(loading) {
+  @include statusMixin(loading) {
+    color: $color-6;
+  }
+}

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

@@ -1,101 +1,101 @@
-import {designComponent, getComponentCls, mergeAttrs, nextIndex, onMounted, reactive, useClasses, useModel, useRefs, useStyles, watch} from "plain-design-composition";
-import {delay} from "plain-utils/utils/delay";
-import Loading from "../Loading";
-import './loading-mask.scss';
-import Transition from "../Transition";
-
-export const LoadingMask = designComponent({
-  name: 'loading-mask',
-  inheritPropsType: HTMLDivElement,
-  inheritAttrs: false,
-  props: {
-    modelValue: { type: Boolean },                                    // 是否打开loading遮罩
-    message: { type: String },                                        // 提示信息
-    noMask: { type: Boolean },                                        // 去掉遮罩
-    loadingType: { type: String, default: 'delta' },                  // loading类型
-    maskColor: { type: String, },                                     // 遮罩背景色
-    fixedPosition: { type: Boolean },                                 // 是否为页面文档根节点的加载遮罩
-    inDirective: { type: Boolean },                                   // 是否为遮罩指令服务的实例
-  },
-  emits: {
-    onUpdateModelValue: (val: boolean | undefined) => true,
-  },
-  setup({ props, event, attrs }) {
-
-    const { refs, onRef } = useRefs({ el: HTMLElement });
-    const modelValue = useModel(() => props.modelValue, event.emit.onUpdateModelValue);
-
-    const state = reactive({
-      isMounted: false,
-      zIndex: nextIndex() + (!props.fixedPosition ? -1500 : 0) + 1,
-    });
-
-    const classes = useClasses(() => [
-      getComponentCls('loading-mask'),
-      {
-        'loading-no-mask': props.noMask,
-        'loading-mask-fixed-position': props.fixedPosition
-      }
-    ]);
-
-    const styles = useStyles(style => {
-      !!props.maskColor && (style.background = props.maskColor);
-      style.zIndex = state.zIndex;
-    });
-
-    const utils = {
-      /**
-       * 检查父节点的position是否为 absolute，relative或者fixed，不是的话，设置为 relative
-       * @author  韦胜健
-       * @date    2020/11/3 16:42
-       */
-      resetParentPosition: async () => {
-        if (props.fixedPosition) {
-          return;
-        }
-        await delay();
-        const el = refs.el;
-        if (el) {
-          let parentNode = el.parentNode as HTMLElement;
-          if (props.inDirective) {
-            parentNode = parentNode.parentNode as HTMLElement;
-          }
-          if (!!parentNode) {
-            const styles = window.getComputedStyle(parentNode);
-            const position = styles.position;
-            if (['absolute', 'relative', 'fixed'].indexOf(position) === -1) {
-              parentNode.style.position = 'relative';
-            }
-          }
-        }
-      }
-    };
-
-    watch(() => modelValue.value && state.isMounted, async val => {
-      !!val && (state.zIndex = nextIndex() + (!props.fixedPosition ? -1500 : 0) + 1);
-      await utils.resetParentPosition();
-    });
-
-    onMounted(() => {
-      utils.resetParentPosition();
-      setTimeout(() => {state.isMounted = true;}, 23);
-    });
-
-    return {
-      refer: { refs },
-      render: () => (
-        <Transition name={getComponentCls('transition-fade')} unmount show={!!modelValue.value && state.isMounted}>
-          <div
-            {...mergeAttrs({
-              style: styles.value,
-              class: classes.value,
-            }, attrs)}
-            ref={onRef.el}>
-            <Loading type={props.loadingType}/>
-            {!!props.message && <span>{props.message}</span>}
-          </div>
-        </Transition>
-      )
-    };
-  },
-});
+import {designComponent, getComponentCls, mergeAttrs, nextIndex, onMounted, reactive, useClasses, useModel, useRefs, useStyles, watch} from "plain-design-composition";
+import {delay} from "plain-utils/utils/delay";
+import Loading from "../Loading";
+import './loading-mask.scss';
+import Transition from "../Transition";
+
+export const LoadingMask = designComponent({
+  name: 'loading-mask',
+  inheritPropsType: HTMLDivElement,
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: Boolean },                                    // 是否打开loading遮罩
+    message: { type: String },                                        // 提示信息
+    noMask: { type: Boolean },                                        // 去掉遮罩
+    loadingType: { type: String, default: 'delta' },                  // loading类型
+    maskColor: { type: String, },                                     // 遮罩背景色
+    fixedPosition: { type: Boolean },                                 // 是否为页面文档根节点的加载遮罩
+    inDirective: { type: Boolean },                                   // 是否为遮罩指令服务的实例
+  },
+  emits: {
+    onUpdateModelValue: (val: boolean | undefined) => true,
+  },
+  setup({ props, event, attrs }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLElement });
+    const modelValue = useModel(() => props.modelValue, event.emit.onUpdateModelValue);
+
+    const state = reactive({
+      isMounted: false,
+      zIndex: nextIndex() + (!props.fixedPosition ? -1500 : 0) + 1,
+    });
+
+    const classes = useClasses(() => [
+      getComponentCls('loading-mask'),
+      {
+        'loading-no-mask': props.noMask,
+        'loading-mask-fixed-position': props.fixedPosition
+      }
+    ]);
+
+    const styles = useStyles(style => {
+      !!props.maskColor && (style.background = props.maskColor);
+      style.zIndex = state.zIndex;
+    });
+
+    const utils = {
+      /**
+       * 检查父节点的position是否为 absolute，relative或者fixed，不是的话，设置为 relative
+       * @author  韦胜健
+       * @date    2020/11/3 16:42
+       */
+      resetParentPosition: async () => {
+        if (props.fixedPosition) {
+          return;
+        }
+        await delay(23);
+        const el = refs.el;
+        if (el) {
+          let parentNode = el.parentNode as HTMLElement;
+          if (props.inDirective) {
+            parentNode = parentNode.parentNode as HTMLElement;
+          }
+          if (!!parentNode) {
+            const styles = window.getComputedStyle(parentNode);
+            const position = styles.position;
+            if (['absolute', 'relative', 'fixed'].indexOf(position) === -1) {
+              parentNode.style.position = 'relative';
+            }
+          }
+        }
+      }
+    };
+
+    watch(() => modelValue.value && state.isMounted, async val => {
+      !!val && (state.zIndex = nextIndex() + (!props.fixedPosition ? -1500 : 0) + 1);
+      await utils.resetParentPosition();
+    });
+
+    onMounted(() => {
+      utils.resetParentPosition();
+      setTimeout(() => {state.isMounted = true;}, 23);
+    });
+
+    return {
+      refer: { refs },
+      render: () => (
+        <Transition name={getComponentCls('transition-fade')} unmount show={!!modelValue.value && state.isMounted}>
+          <div
+            {...mergeAttrs({
+              style: styles.value,
+              class: classes.value,
+            }, attrs)}
+            ref={onRef.el}>
+            <Loading type={props.loadingType}/>
+            {!!props.message && <span>{props.message}</span>}
+          </div>
+        </Transition>
+      )
+    };
+  },
+});

package/src/packages/components/LoadingMask/loading-mask.scss

@@ -1,34 +1,34 @@
-@include prefix(loading-mask) {
-  color: plv(primary-6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: plv(loading-mask-color);
-  transition: all linear 300ms;
-  transform-origin: center center;
-  cursor: progress;
-  pointer-events: auto;
-
-  @include prefix(loading) {
-    margin-bottom: 20px;
-    font-size: 32px;
-    & + span {
-      font-size: 14px;
-    }
-  }
-
-  &.loading-no-mask {
-    pointer-events: none;
-    background-color: transparent;
-  }
-
-  &.loading-mask-fixed-position {
-    position: fixed;
-  }
-}
+@include prefix(loading-mask) {
+  color: plv(primary-6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: plv(loading-mask-color);
+  transition: all linear 300ms;
+  transform-origin: center center;
+  cursor: progress;
+  pointer-events: auto;
+
+  @include prefix(loading) {
+    margin-bottom: 20px;
+    font-size: 32px;
+    & + span {
+      font-size: 14px;
+    }
+  }
+
+  &.loading-no-mask {
+    pointer-events: none;
+    background-color: transparent;
+  }
+
+  &.loading-mask-fixed-position {
+    position: fixed;
+  }
+}

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

@@ -1,93 +1,93 @@
-import {computed, designComponent, PropType, useModel} from "plain-design-composition";
-import {InputGroup} from "../InputGroup";
-import {InputNumber} from "../InputNumber";
-import {Input} from "../Input";
-import {PlainObject} from "plain-utils/utils/event";
-
-export const NumberRange = designComponent({
-  name: 'number-range',
-  props: {
-    start: { type: [String, Number] },
-    end: { type: [String, Number] },
-    startAttrs: { type: Object as PropType<PlainObject> },
-    endAttrs: { type: Object as PropType<PlainObject> },
-    noGroupWrapper: { type: Boolean },
-  },
-  emits: {
-    onUpdateStart: (val?: string | number) => true,
-    onUpdateEnd: (val?: string | number) => true,
-    onBlur: () => true,
-    onEnter: () => true,
-    onClear: () => true,
-  },
-  setup({ props, event: { emit } }) {
-
-    const startModel = useModel(() => props.start, emit.onUpdateStart);
-    const endModel = useModel(() => props.end, emit.onUpdateEnd);
-
-    const placeValue = computed(() => {
-      let start = startModel.value == null ? '' : String(startModel.value).trim();
-      let end = endModel.value == null ? '' : String(endModel.value).trim();
-      return start + end;
-    });
-
-    const checkRange = () => {
-      let start = startModel.value;
-      let end = endModel.value;
-      let startNum = Number(start);
-      let endNum = Number(end);
-      if (start == null || end == null || isNaN(startNum) || isNaN(endNum)) {
-        return;
-      }
-      if (startNum > endNum) {
-        [startNum, endNum] = [endNum, startNum];
-        startModel.value = startNum;
-        endModel.value = endNum;
-      }
-    };
-
-    const handler = {
-      onBlur: (): void => {
-        checkRange();
-        emit.onBlur();
-      },
-      onEnter: () => {
-        checkRange();
-        emit.onEnter();
-      },
-      onClear: () => {
-        startModel.value = undefined;
-        endModel.value = undefined;
-        emit.onClear();
-      },
-    };
-
-    return () => {
-      const content = (
-        <Input
-          suffixIcon="pi-original-size"
-          placeValue={placeValue.value}
-          clearHandler={handler.onClear}
-        >
-          <InputNumber v-model={startModel.value} onBlur={handler.onBlur} button={null} align="center" onEnter={handler.onEnter} {...{
-            ...props.startAttrs || {},
-            inputAttrs: {
-              ...props.startAttrs?.inputAttrs,
-              bare: true,
-            },
-          }}/>
-          <InputNumber v-model={endModel.value} onBlur={handler.onBlur} button={null} align="center" onEnter={handler.onEnter} {...{
-            ...props.endAttrs || {},
-            inputAttrs: {
-              ...props.endAttrs?.inputAttrs,
-              bare: true,
-            },
-          }}/>
-        </Input>
-      );
-      return (props.noGroupWrapper ? content : (<InputGroup>{content}</InputGroup>));
-    };
-  },
-});
-
-export default NumberRange;
+import {computed, designComponent, PropType, useModel} from "plain-design-composition";
+import {InputGroup} from "../InputGroup";
+import {InputNumber} from "../InputNumber";
+import {Input} from "../Input";
+import {PlainObject} from "plain-utils/utils/event";
+
+export const NumberRange = designComponent({
+  name: 'number-range',
+  props: {
+    start: { type: [String, Number] },
+    end: { type: [String, Number] },
+    startAttrs: { type: Object as PropType<PlainObject> },
+    endAttrs: { type: Object as PropType<PlainObject> },
+    noGroupWrapper: { type: Boolean },
+  },
+  emits: {
+    onUpdateStart: (val?: string | number) => true,
+    onUpdateEnd: (val?: string | number) => true,
+    onBlur: () => true,
+    onEnter: () => true,
+    onClear: () => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const startModel = useModel(() => props.start, emit.onUpdateStart);
+    const endModel = useModel(() => props.end, emit.onUpdateEnd);
+
+    const placeValue = computed(() => {
+      let start = startModel.value == null ? '' : String(startModel.value).trim();
+      let end = endModel.value == null ? '' : String(endModel.value).trim();
+      return start + end;
+    });
+
+    const checkRange = () => {
+      let start = startModel.value;
+      let end = endModel.value;
+      let startNum = Number(start);
+      let endNum = Number(end);
+      if (start == null || end == null || isNaN(startNum) || isNaN(endNum)) {
+        return;
+      }
+      if (startNum > endNum) {
+        [startNum, endNum] = [endNum, startNum];
+        startModel.value = startNum;
+        endModel.value = endNum;
+      }
+    };
+
+    const handler = {
+      onBlur: (): void => {
+        checkRange();
+        emit.onBlur();
+      },
+      onEnter: () => {
+        checkRange();
+        emit.onEnter();
+      },
+      onClear: () => {
+        startModel.value = undefined;
+        endModel.value = undefined;
+        emit.onClear();
+      },
+    };
+
+    return () => {
+      const content = (
+        <Input
+          suffixIcon="pi-original-size"
+          placeValue={placeValue.value}
+          clearHandler={handler.onClear}
+        >
+          <InputNumber v-model={startModel.value} onBlur={handler.onBlur} button={null} align="center" onEnter={handler.onEnter} {...{
+            ...props.startAttrs || {},
+            inputAttrs: {
+              ...props.startAttrs?.inputAttrs,
+              bare: true,
+            },
+          }}/>
+          <InputNumber v-model={endModel.value} onBlur={handler.onBlur} button={null} align="center" onEnter={handler.onEnter} {...{
+            ...props.endAttrs || {},
+            inputAttrs: {
+              ...props.endAttrs?.inputAttrs,
+              bare: true,
+            },
+          }}/>
+        </Input>
+      );
+      return (props.noGroupWrapper ? content : (<InputGroup>{content}</InputGroup>));
+    };
+  },
+});
+
+export default NumberRange;

package/src/packages/components/Object/createObjectHooks.tsx

@@ -1,13 +1,13 @@
-import {createHooks, createRenderHook, iMouseEvent} from "plain-design-composition";
-
-export function createObjectHooks() {
-  return {
-    onRender: createRenderHook({ single: true }),
-    onClickSuffixIcon: createHooks<(e: iMouseEvent) => void>(),
-    onFocus: createHooks<(e: FocusEvent) => void>(),
-    onBlur: createHooks<(e: FocusEvent) => void>(),
-    onInputChange: createHooks<(val: string | null) => void>(),
-  };
-}
-
-export type iObjectHooks = ReturnType<typeof createObjectHooks>
+import {createHooks, createRenderHook, iMouseEvent} from "plain-design-composition";
+
+export function createObjectHooks() {
+  return {
+    onRender: createRenderHook({ single: true }),
+    onClickSuffixIcon: createHooks<(e: iMouseEvent) => void>(),
+    onFocus: createHooks<(e: FocusEvent) => void>(),
+    onBlur: createHooks<(e: FocusEvent) => void>(),
+    onInputChange: createHooks<(val: string | null) => void>(),
+  };
+}
+
+export type iObjectHooks = ReturnType<typeof createObjectHooks>