plain-design 0.0.97 → 1.0.0-beta.10

package/src/packages/PlList/index.tsx

@@ -1,75 +0,0 @@
-import {designComponent, useRefs} from "plain-design-composition";
-import React, {ReactElement} from "react";
-import FlipMove from "react-flip-move";
-import './list.scss'
-import {PropType} from "plain-design-composition"
-
-export const PlList = designComponent({
-    props: {
-        tag: {type: String, default: 'div'},
-        easing: {type: String, default: 'cubic-bezier(0.23, 1, 0.32, 1)'},
-        duration: {type: [String, Number], default: '300ms'},
-        animation: {type: String as PropType<FlipMove.AnimationProp>},
-        enterAnimation: {type: String as PropType<FlipMove.AnimationProp>},
-        leaveAnimation: {type: String as PropType<FlipMove.AnimationProp>},
-        onStart: {type: Function as PropType<(childElement: ReactElement<any>, domNode: HTMLElement) => void>},
-        onFinish: {type: Function as PropType<(childElement: ReactElement<any>, domNode: HTMLElement) => void>},
-        onStartAll: {type: Function as PropType<(childElements: Array<ReactElement<any>>, domNodes: Array<HTMLElement>) => void>},
-        onFinishAll: {type: Function as PropType<(childElements: Array<ReactElement<any>>, domNodes: Array<HTMLElement>) => void>},
-        disableAllAnimations: {type: Boolean, default: false},
-    },
-    inheritPropsType: HTMLDivElement,
-    slots: ['default'],
-    setup({props, slots}) {
-        const {refs, onRef} = useRefs({el: HTMLDivElement})
-
-        const defaultFlipAnimation = {
-            enter: {
-                from: {
-                    transform: 'translateY(30px)',
-                    opacity: 0.15,
-                },
-                to: {
-                    transform: '',
-                },
-            },
-            leave: {
-                from: {
-                    transform: '',
-                },
-                to: {
-                    transform: 'translateY(-30px)',
-                    opacity: 0,
-                },
-            },
-        }
-
-        return {
-            refer: {
-                refs,
-            },
-            render: () => {
-                const Tag = props.tag as any
-                return (
-                    <Tag className="pl-list" ref={onRef.el}>
-                        <FlipMove
-                            typeName={null}
-                            easing={props.easing}
-                            duration={props.duration}
-                            enterAnimation={props.enterAnimation || defaultFlipAnimation.enter}
-                            leaveAnimation={props.leaveAnimation || defaultFlipAnimation.leave}
-                            onStart={props.onStart}
-                            onFinish={props.onFinish}
-                            onStartAll={props.onStartAll}
-                            onFinishAll={props.onFinishAll}
-                            disableAllAnimations={props.disableAllAnimations}
-                            {...{children: slots.default()} as any}
-                        />
-                    </Tag>
-                )
-            }
-        }
-    },
-})
-
-export default PlList

package/src/packages/PlList/list.scss

@@ -1,3 +0,0 @@
-.pl-list {
-    position: relative;
-}

package/src/packages/PlLoading/index.tsx

@@ -1,46 +0,0 @@
-import {designComponent, useRefs, watch} from "plain-design-composition";
-import {PlainLoading} from "plain-loading";
-import {delay} from "plain-utils/utils/delay";
-import React from "react";
-import {useClasses} from "plain-design-composition";
-import './loading.scss'
-
-export const PlLoading = designComponent({
-    name: 'pl-loading',
-    props: {
-        type: {type: String, default: 'alpha'},
-        status: {type: String, default: null},
-    },
-    inheritPropsType: HTMLElement,
-    setup({props}) {
-
-        const {refs, onRef} = useRefs({el: HTMLElement})
-
-        const classes = useClasses(() => [
-            'pl-loading',
-            !!props.status ? `pl-loading-status-${props.status}` : null,
-        ])
-
-        watch(() => props.type, async val => {
-            if (!val) {
-                return !!refs.el && (refs.el.innerHTML = '')
-            }
-            await delay(23)
-            if (!(PlainLoading as any)[val]) {
-                throw new Error(`pl-loading: un recognise type:${val}`)
-            }
-            !!refs.el && (refs.el!.innerHTML = (PlainLoading as any)[val]().outerHTML)
-        }, {immediate: true})
-
-        return {
-            refer: {
-                refs,
-            },
-            render: () => {
-                return <i className={classes.value} ref={onRef.el}/>
-            }
-        }
-    },
-})
-
-export default PlLoading

package/src/packages/PlLoading/loading.scss

@@ -1,7 +0,0 @@
-@include theme {
-    .pl-loading {
-        @include statusMixin(loading) {
-            color: $value;
-        }
-    }
-}

package/src/packages/PlLoadingMask/index.tsx

@@ -1,106 +0,0 @@
-import {designComponent, onMounted, reactive, useModel, useRefs, useStyles, watch} from 'plain-design-composition'
-import './loading-mask.scss'
-import {nextIndex} from "plain-design-composition"
-import {useClasses} from "plain-design-composition";
-import {delay} from "plain-utils/utils/delay";
-import React from 'react';
-import PlLoading from "../PlLoading";
-import PlTransition from "../PlTransition";
-
-export const PlLoadingMask = designComponent({
-    name: 'pl-loading-mask',
-    props: {
-        modelValue: {type: Boolean},                                    // 是否打开loading遮罩
-        message: {type: String},                                        // 提示信息
-        loadingType: {type: String, default: 'delta'},                  // loading类型
-        background: {type: String, default: 'rgba(255,255,255,0.85)'},  // 遮罩背景色
-        unlock: {type: Boolean},                                        // 取消阻止点击事件
-        fixedPosition: {type: Boolean},                                 // 是否为根节点的加载遮罩
-        inDirective: {type: Boolean},                                   // 是否为遮罩指令服务的实例
-    },
-    emits: {
-        onUpdateModelValue: (val: boolean | undefined) => true,
-    },
-    inheritPropsType: HTMLDivElement,
-    inheritAttrs: false,
-    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(() => [
-            'pl-loading-mask',
-            {
-                'pl-loading-mask-unlock': props.unlock,
-                'pl-loading-mask-fixed-position': props.fixedPosition
-            }
-        ])
-
-        const styles = useStyles(style => {
-            style.background = props.background
-            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: () => (
-                <PlTransition name={'pl-transition-fade'} unmount show={!!modelValue.value && state.isMounted}>
-                    <div style={styles.value} className={classes.value} ref={onRef.el} {...attrs}>
-                        <PlLoading type={props.loadingType}/>
-                        {!!props.message && <span>{props.message}</span>}
-                    </div>
-                </PlTransition>
-            )
-        }
-    },
-})
-
-export default PlLoadingMask

package/src/packages/PlLoadingMask/loading-mask.scss

@@ -1,44 +0,0 @@
-@include theme {
-  .pl-loading-mask {
-    color: $colorPrimary;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(255, 255, 255, 0.5);
-    transition: all linear 300ms;
-    transform-origin: center center;
-    cursor: progress;
-    pointer-events: auto;
-
-    .pl-loading {
-      margin-bottom: 20px;
-      font-size: 32px;
-
-      & + span {
-        font-size: 14px;
-      }
-    }
-
-    &.pl-loading-mask-unlock {
-      pointer-events: none;
-    }
-
-    &.pl-loading-mask-fixed-position {
-      position: fixed;
-    }
-  }
-}
-
-.pl-transition-loading-mask-enter-active, .pl-transition-loading-mask-leave-active {
-  opacity: 1;
-}
-
-.pl-transition-loading-mask-enter-from, .pl-transition-loading-mask-leave-to {
-  opacity: 0;
-}

package/src/packages/PlNumber/index.tsx

@@ -1,269 +0,0 @@
-import {computed, designComponent, reactive, useModel, useNumber, useRefs} from "plain-design-composition";
-import {StyleProps, useStyle} from "../../use/useStyle";
-import {EditProps, useEdit} from "../../use/useEdit";
-import {getKey, KEY} from "../keyboard";
-import {PlInput} from "../PlInput";
-import React from "react";
-import {useClasses} from "plain-design-composition";
-import PlIcon from "../PlIcon";
-import {useClickWave} from "../../directives/ClickWave";
-import './number.scss'
-import {NativeInput} from "../NativeInput";
-
-const NAN = 'NAN'
-
-export const PlNumber = designComponent({
-    name: 'pl-number',
-    props: {
-        ...StyleProps,
-        ...EditProps,
-
-        modelValue: {type: [String, Number]},                       // 双向绑定值
-        min: {type: [String, Number]},                              // 最小值
-        max: {type: [String, Number]},                              // 最大值
-        step: {type: [String, Number], default: 1},                 // 计数器步长
-        stepStrictly: {type: Boolean},                              // 是否只能输入 step 的倍数
-        precision: {type: [Number, String]},                        // 数值精度
-        hideButton: {type: Boolean},                                // 隐藏操作按钮
-
-        /*---------------------------------------input-------------------------------------------*/
-        inputProps: {type: Object},                                 // pl-input属性配置对象
-    },
-    inheritPropsType: PlInput,
-    emits: {
-        onFocus: (e: React.FocusEvent) => true,
-        onBlur: (e: React.FocusEvent) => true,
-        onUpdateModelValue: (val: string | number | undefined) => true,
-        onEnter: (e: KeyboardEvent) => true,
-    },
-    setup({props, event: {emit}}) {
-
-        const {refs, onRef} = useRefs({
-            add: HTMLDivElement,
-            sub: HTMLDivElement,
-            input: PlInput,
-            innerInput: HTMLInputElement,
-        })
-
-        const model = useModel(() => props.modelValue, emit.onUpdateModelValue, {autoEmit: false})
-        useStyle({status: undefined})
-        const {editComputed} = useEdit()
-        const state = reactive({
-            isFocus: false,                                         // 当前是否获取焦点
-            interval: null as null | number,                        // 进步器长摁定时器
-            timer: null as null | number,
-        })
-
-        const {numberState} = useNumber(props, ['step', 'max', 'min', 'precision'])
-
-        /*---------------------------------------utils-------------------------------------------*/
-
-        const utils = {
-            getValue: (val: any): undefined | number | 'NAN' => {
-                if (val == null) return undefined
-                val = String(val).trim()
-                if (val === '') return undefined
-                val = Number(val)
-                if (isNaN(val)) {
-                    return NAN
-                } else {
-                    return val
-                }
-            },
-            getEffectiveValue: (): number | undefined => {
-                let value = formatModelValue.value
-                if (value === NAN) {
-                    value = formatValue.value
-                    if (value === NAN) {
-                        if (numberState.min != null) return numberState.min
-                        else if (numberState.max != null) return numberState.max
-                        else if (props.stepStrictly) return numberState.step
-                        else return 0
-                    }
-                }
-                return value
-            },
-            checkValue: (value: number | undefined): number | undefined => {
-                if (value != null) {
-                    // min
-                    if (numberState.min != null && value < numberState.min) {
-                        value = numberState.min
-                    }
-                    // max
-                    if (numberState.max != null && value! > numberState.max) {
-                        value = numberState.max
-                    }
-                    // stepStrictly
-                    if (props.stepStrictly && value! % numberState.step! !== 0) {
-                        // console.log('props.value', props.modelValue)
-                        value = props.modelValue == undefined ? undefined : Number(props.modelValue)
-                    }
-                    // precision
-                    if (numberState.precision != null) {
-                        value = Number(value!.toFixed(numberState.precision))
-                    }
-                }
-                return value
-            }
-        }
-
-        /*---------------------------------------computer-------------------------------------------*/
-
-        const classes = useClasses(() => ([
-            `pl-number`,
-            {
-                'pl-number-hide-button': props.hideButton,
-                'pl-number-disabled': editComputed.value.disabled,
-            }
-        ]))
-        const formatModelValue = computed(() => utils.getValue(model.value))
-        const formatValue = computed(() => utils.getValue(props.modelValue))
-
-        /*---------------------------------------methods-------------------------------------------*/
-
-        const methods = {
-            add: () => {
-                if (!editComputed.value.editable) {
-                    return
-                }
-                let value = utils.getEffectiveValue()
-                if (value == null) {
-                    value = 0
-                }
-                value += numberState.step
-                value = utils.checkValue(value)
-                model.value = value
-                emit.onUpdateModelValue(model.value)
-            },
-            minus: () => {
-                if (!editComputed.value.editable) {
-                    return
-                }
-                let value = utils.getEffectiveValue()
-                if (value == null) {
-                    value = 0
-                }
-                value -= numberState.step
-                value = utils.checkValue(value)
-                model.value = value
-                emit.onUpdateModelValue(model.value)
-            },
-            clearInterval: () => {              // 清除定时器
-                if (state.interval != null) {
-                    clearInterval(state.interval)
-                }
-                if (state.timer != null) {
-                    clearTimeout(state.timer)
-                }
-                window.removeEventListener('mouseup', methods.clearInterval)
-            },
-            focus: () => {
-                refs.input!.methods.focus()
-            },
-            blur: () => {
-                refs.input!.methods.blur()
-            },
-        }
-
-        /*---------------------------------------handler-------------------------------------------*/
-
-        const handler = {
-            focus: (e: React.FocusEvent) => {
-                state.isFocus = true
-                emit.onFocus(e)
-            },
-            blur: (e: React.FocusEvent) => {
-                model.value = utils.checkValue(utils.getEffectiveValue())
-                emit.onUpdateModelValue(model.value)
-                state.isFocus = false
-                emit.onBlur(e)
-            },
-            input: (e: React.ChangeEvent<HTMLInputElement>) => {
-                model.value = e.target.value
-            },
-            enter: (e: KeyboardEvent) => {
-                model.value = utils.checkValue(utils.getEffectiveValue())
-                emit.onUpdateModelValue(model.value)
-                emit.onEnter(e)
-            },
-            intervalAdd: () => {
-                methods.add()
-                state.timer = setTimeout(() => {
-                    state.interval = setInterval(methods.add, 100) as any as number
-                }, 500) as any as number
-                window.addEventListener('mouseup', methods.clearInterval)
-            },
-            intervalMinus: () => {
-                methods.minus()
-                state.timer = setTimeout(() => {
-                    state.interval = setInterval(() => methods.minus(), 100) as any as number
-                }, 500) as any as number
-                window.addEventListener('mouseup', methods.clearInterval)
-            },
-            clearHandler: () => {
-                model.value = undefined
-                emit.onUpdateModelValue(model.value)
-            },
-            keydown: (e: React.KeyboardEvent) => {
-                const key = getKey(e)
-                switch (key) {
-                    case KEY.up:
-                        e.preventDefault()
-                        e.stopPropagation()
-                        methods.add()
-                        break
-                    case KEY.down:
-                        e.preventDefault()
-                        e.stopPropagation()
-                        methods.minus()
-                        break
-                    case KEY.enter:
-                        handler.enter(e.nativeEvent)
-                        break
-                }
-            },
-        }
-
-        useClickWave({elGetter: () => refs.add, optionsGetter: () => ({size: 'large', disabled: !editComputed.value.editable})})
-        useClickWave({elGetter: () => refs.sub, optionsGetter: () => ({size: 'large', disabled: !editComputed.value.editable})})
-
-        return {
-            refer: {
-                ...methods,
-            },
-            render: () => (
-                <PlInput
-                    ref={onRef.input}
-                    className={classes.value}
-                    isFocus={state.isFocus}
-                    inputInnerTabindex={null as any}
-                    {...(props.inputProps || {})}
-                >
-                    {!props.hideButton && (
-                        <div className="pl-number-prepend-button plain-click-node" onMouseDown={handler.intervalMinus} ref={onRef.sub}>
-                            <PlIcon icon="el-icon-minus"/>
-                        </div>
-                    )}
-                    <NativeInput
-                        ref={onRef.innerInput}
-                        type="text"
-                        value={model.value == null ? '' : model.value}
-                        disabled={editComputed.value.disabled!}
-                        readOnly={editComputed.value.readonly!}
-                        placeholder={editComputed.value.placeholder!}
-                        onFocus={handler.focus}
-                        onBlur={handler.blur}
-                        onInput={handler.input}
-                        onKeyDown={handler.keydown}/>
-                    {!props.hideButton && (
-                        <div className="pl-number-append-button plain-click-node" onMouseDown={handler.intervalAdd} ref={onRef.add}>
-                            <PlIcon icon="el-icon-plus"/>
-                        </div>
-                    )}
-                </PlInput>
-            )
-        }
-    },
-})
-
-export default PlNumber

package/src/packages/PlNumber/number.scss

@@ -1,121 +0,0 @@
-@include theme {
-
-  .pl-number {
-    display: inline-block;
-    width: initial;
-
-    .pl-input-inner {
-      position: relative;
-      padding-top: 1px;
-      padding-bottom: 1px;
-      display: block;
-
-      input {
-        width: 100%;
-        height: 100%;
-        border: none;
-        outline: none;
-        float: left;
-        color: $itc;
-        font-size: inherit;
-        box-sizing: border-box;
-
-        &::placeholder {
-          color: $ipc;
-        }
-
-        &::-ms-clear {
-          display: none;
-        }
-
-        &::-webkit-outer-spin-button,
-        &::-webkit-inner-spin-button {
-          -webkit-appearance: none !important;
-          margin: 0;
-        }
-
-        &:-webkit-autofill {
-          background-color: white !important;
-        }
-      }
-
-      .pl-number-prepend-button, .pl-number-append-button {
-        position: absolute;
-        top: 1px;
-        bottom: 1px;
-        width: 30px;
-        text-align: center;
-        background-color: #f5f7fa;
-        cursor: pointer;
-        outline: none;
-        user-select: none;
-        transition: background-color linear 150ms;
-
-        .pl-icon {
-          vertical-align: 0;
-        }
-
-        &.pl-number-prepend-button {
-          left: 1px;
-          border-right: solid 1px #dcdfe6;
-        }
-
-        &.pl-number-append-button {
-          right: 1px;
-          border-left: solid 1px #dcdfe6;
-        }
-
-        &:active {
-          background-color: #e1e1e1;
-        }
-      }
-    }
-
-    @include shapeMixin(input) {
-      .pl-number-prepend-button {
-        border-top-left-radius: $value;
-        border-bottom-left-radius: $value;
-      }
-      .pl-number-append-button {
-        border-top-right-radius: $value;
-        border-bottom-right-radius: $value;
-      }
-    }
-    @include statusMixin(input) {
-      .pl-number-prepend-button, .pl-number-append-button {
-        border-color: $value !important;
-        background-color: mix($value, white, 10%);
-      }
-      input {
-        background-color: mix($value, white, 5%);
-        color: $value;
-      }
-    }
-
-    &:not(.pl-number-hide-button) {
-      .pl-input-inner {
-        padding-left: 30px !important;
-        padding-right: 30px !important;
-
-        input {
-          text-align: center !important;
-          padding: 0 12px;
-        }
-      }
-    }
-
-    &.pl-number-disabled {
-      input {
-        background-color: $disabled;
-        cursor: not-allowed;
-        color: #c0c4cc;
-      }
-
-      .pl-number-prepend-button, .pl-number-append-button {
-        background-color: $disabled;
-        cursor: not-allowed;
-        color: $disabledText;
-      }
-    }
-  }
-}