plain-design 0.0.97 → 1.0.0-beta.2

package/src/packages/PlPopper/trigger/BaseTrigger.ts

@@ -1,351 +0,0 @@
-import {PopperTrigger, PopperTriggerType} from "./PopperTrigger";
-import {SimpleFunction} from "plain-design-composition"
-
-export function getBaseTrigger(
-    triggerName: PopperTriggerType,
-    {
-        model,
-        openModel,
-
-        show,
-        hide,
-
-        hoverOpenDelay,
-        hoverCloseDelay,
-        reference,
-
-        on,
-        off,
-        emit,
-    }: {
-        model: { value: boolean | undefined },
-        openModel: { value: boolean | undefined },
-
-        show: SimpleFunction,
-        hide: SimpleFunction,
-
-        hoverOpenDelay: number,
-        hoverCloseDelay: number,
-        reference: HTMLElement,
-
-        on: {
-            onEnterReference: SimpleFunction,
-            onLeaveReference: SimpleFunction,
-
-            onEnterPopper: SimpleFunction,
-            onLeavePopper: SimpleFunction,
-
-            onReferenceFocus: SimpleFunction,
-            onReferenceBlur: SimpleFunction,
-
-            onClickReference: SimpleFunction,
-            onClickBody: SimpleFunction,
-            onClickPopper: SimpleFunction,
-        },
-        off: {
-            onEnterReference: SimpleFunction,
-            onLeaveReference: SimpleFunction,
-
-            onEnterPopper: SimpleFunction,
-            onLeavePopper: SimpleFunction,
-
-            onReferenceFocus: SimpleFunction,
-            onReferenceBlur: SimpleFunction,
-
-            onClickReference: SimpleFunction,
-            onClickBody: SimpleFunction,
-            onClickPopper: SimpleFunction,
-        },
-        emit: {
-            onReferenceFocus: SimpleFunction,
-            onReferenceBlur: SimpleFunction,
-
-            onEnterReference: SimpleFunction,
-            onLeaveReference: SimpleFunction,
-
-            onEnterPopper: SimpleFunction,
-            onLeavePopper: SimpleFunction,
-        },
-    },
-) {
-    switch (triggerName) {
-        case PopperTriggerType.hover:
-            return getHoverTrigger({
-                model,
-                show,
-                hide,
-                hoverOpenDelay,
-                hoverCloseDelay,
-                on,
-                off,
-                emit,
-            })
-        case PopperTriggerType.click:
-            return getClickTrigger({
-                model,
-                show,
-                hide,
-                openModel,
-                on,
-                off,
-            })
-        case PopperTriggerType.focus:
-            return getFocusTrigger({
-                show,
-                hide,
-                reference,
-                on,
-                off,
-                emit,
-            })
-        case PopperTriggerType.manual:
-            return getManualTrigger()
-    }
-}
-
-function getHoverTrigger({
-                             model,
-                             show,
-                             hide,
-                             hoverOpenDelay,
-                             hoverCloseDelay,
-
-                             on,
-                             off,
-                             emit,
-                         }: {
-    model: { value: boolean | undefined },
-    show: SimpleFunction,
-    hide: SimpleFunction,
-    hoverOpenDelay: number,
-    hoverCloseDelay: number,
-
-    on: {
-        onEnterReference: SimpleFunction,
-        onLeaveReference: SimpleFunction,
-
-        onEnterPopper: SimpleFunction,
-        onLeavePopper: SimpleFunction,
-
-        onReferenceFocus: SimpleFunction,
-        onReferenceBlur: SimpleFunction,
-
-        onClickReference: SimpleFunction,
-        onClickPopper: SimpleFunction,
-    },
-    off: {
-        onEnterReference: SimpleFunction,
-        onLeaveReference: SimpleFunction,
-
-        onEnterPopper: SimpleFunction,
-        onLeavePopper: SimpleFunction,
-
-        onReferenceFocus: SimpleFunction,
-        onReferenceBlur: SimpleFunction,
-
-        onClickReference: SimpleFunction,
-        onClickPopper: SimpleFunction,
-    },
-    emit: {
-        onReferenceFocus: SimpleFunction,
-        onReferenceBlur: SimpleFunction,
-
-        onEnterReference: SimpleFunction,
-        onLeaveReference: SimpleFunction,
-
-        onEnterPopper: SimpleFunction,
-        onLeavePopper: SimpleFunction,
-    },
-}) {
-    let closeTimer: number | undefined;
-    let openTimer: number | undefined;
-
-    const handler = {
-        reference: {
-            enter: () => {
-                if (!!closeTimer) {
-                    clearTimeout(closeTimer)
-                    closeTimer = undefined
-                }
-                openTimer = setTimeout(() => {
-                    show()
-                    openTimer = undefined
-                    emit.onEnterReference(model.value)
-                }, hoverOpenDelay) as any as number
-            },
-            leave: () => {
-                if (!!openTimer) {
-                    clearTimeout(openTimer)
-                    openTimer = undefined
-                }
-                closeTimer = setTimeout(() => {
-                    hide()
-                    closeTimer = undefined
-                    emit.onLeaveReference(model.value)
-                }, hoverCloseDelay) as any as number
-            },
-        },
-        popper: {
-            enter: () => {
-                if (!!closeTimer) {
-                    clearTimeout(closeTimer)
-                    closeTimer = undefined
-                }
-                openTimer = setTimeout(() => {
-                    show()
-                    openTimer = undefined
-                    // emit.onEnterPopper(model.value)
-                }, hoverOpenDelay) as any as number
-            },
-            leave: () => {
-                if (!!openTimer) {
-                    clearTimeout(openTimer)
-                    openTimer = undefined
-                }
-                closeTimer = setTimeout(() => {
-                    hide()
-                    closeTimer = undefined
-                    // emit.onLeavePopper(model.value)
-                }, hoverCloseDelay) as any as number
-            },
-        },
-    }
-
-    return new PopperTrigger(
-        PopperTriggerType.hover,
-        () => {
-            on.onEnterReference(handler.reference.enter)
-            on.onLeaveReference(handler.reference.leave)
-
-            on.onEnterPopper(handler.popper.enter)
-            on.onLeavePopper(handler.popper.leave)
-        },
-        () => {
-            off.onEnterReference(handler.reference.enter)
-            off.onLeaveReference(handler.reference.leave)
-
-            off.onEnterPopper(handler.popper.enter)
-            off.onLeavePopper(handler.popper.leave)
-        }
-    )
-}
-
-function getClickTrigger({
-                             model,
-                             show,
-                             hide,
-                             openModel,
-                             on,
-                             off,
-                         }: {
-    model: { value: boolean | undefined },
-    show: SimpleFunction,
-    hide: SimpleFunction,
-    openModel: { value: boolean | undefined },
-
-    on: {
-        onClickReference: SimpleFunction,
-        onClickBody: SimpleFunction,
-    },
-    off: {
-        onClickReference: SimpleFunction,
-        onClickBody: SimpleFunction,
-    },
-
-}) {
-
-    const handler = {
-        onClickReference: () => {
-            if (model.value) {
-                hide()
-            } else {
-                show()
-            }
-        },
-        onClickBody: () => {
-            if (openModel.value) {
-                hide()
-            }
-        },
-    }
-
-    return new PopperTrigger(
-        PopperTriggerType.click,
-        () => {
-            on.onClickReference(handler.onClickReference)
-            on.onClickBody(handler.onClickBody)
-        },
-        () => {
-            off.onClickReference(handler.onClickReference)
-            off.onClickBody(handler.onClickBody)
-        },
-    )
-}
-
-function getFocusTrigger(
-    {
-        show,
-        hide,
-        reference,
-        on,
-        off,
-        emit,
-    }: {
-        show: SimpleFunction,
-        hide: SimpleFunction,
-        reference: HTMLElement,
-
-        on: {
-            onReferenceFocus: SimpleFunction,
-            onReferenceBlur: SimpleFunction,
-        },
-        off: {
-            onReferenceFocus: SimpleFunction,
-            onReferenceBlur: SimpleFunction,
-        },
-        emit: {
-            onReferenceFocus: SimpleFunction,
-            onReferenceBlur: SimpleFunction,
-        },
-    }
-) {
-
-    let oldTabIndex: string | null;
-    const handler = {
-        focus: (e: FocusEvent) => {
-            emit.onReferenceFocus(e)
-            show()
-        },
-        blur: (e: Event) => {
-            emit.onReferenceBlur(e)
-            hide()
-        },
-    }
-
-    return new PopperTrigger(PopperTriggerType.focus,
-        () => {
-            oldTabIndex = reference.getAttribute('tabindex')
-            if (oldTabIndex == null) {
-                reference.setAttribute('tabindex', '0')
-            }
-            on.onReferenceFocus(handler.focus)
-            on.onReferenceBlur(handler.blur)
-        },
-        () => {
-            if (oldTabIndex == null) {
-                reference.removeAttribute('tabindex')
-            } else {
-                reference.setAttribute('tabindex', oldTabIndex)
-            }
-            off.onReferenceFocus(handler.focus)
-            off.onReferenceBlur(handler.blur)
-        },
-    )
-}
-
-function getManualTrigger() {
-    return new PopperTrigger(PopperTriggerType.manual,
-        () => undefined,
-        () => undefined,
-    )
-}

package/src/packages/PlPopper/trigger/PopperTrigger.ts

@@ -1,107 +0,0 @@
-import {getBaseTrigger} from "./BaseTrigger";
-import {SimpleFunction} from "plain-design-composition"
-
-export class PopperTrigger {
-    data: any
-
-    constructor(
-        public name: PopperTriggerType,             // 触发器名称
-        public init: SimpleFunction,                // 触发器初始化的时候执行函数
-        public destroy: SimpleFunction              // 触发器销毁的时候执行函数
-    ) {
-    }
-}
-
-export enum PopperTriggerType {
-    hover = 'hover',
-    click = 'click',
-    focus = 'focus',
-    manual = 'manual'
-}
-
-export function getPopperTrigger(triggerName: PopperTriggerType, {
-    model,
-    openModel,
-
-    show,
-    hide,
-
-    hoverOpenDelay,
-    hoverCloseDelay,
-    reference,
-
-    on,
-    off,
-    emit,
-}: {
-    model: { value: boolean | undefined },
-    openModel: { value: boolean | undefined },
-
-    show: SimpleFunction,
-    hide: SimpleFunction,
-
-    hoverOpenDelay: number,
-    hoverCloseDelay: number,
-    reference: HTMLElement,
-
-    on: {
-        onClickReference: SimpleFunction,
-        onClickBody: SimpleFunction,
-        onClickPopper: SimpleFunction,
-        onEnterPopper: SimpleFunction,
-        onLeavePopper: SimpleFunction,
-    },
-    off: {
-        onClickReference: SimpleFunction,
-        onClickBody: SimpleFunction,
-        onClickPopper: SimpleFunction,
-        onEnterPopper: SimpleFunction,
-        onLeavePopper: SimpleFunction,
-    },
-    emit: {
-        onReferenceFocus: SimpleFunction,
-        onReferenceBlur: SimpleFunction,
-        onEnterReference: SimpleFunction,
-        onLeaveReference: SimpleFunction,
-        onEnterPopper: SimpleFunction,
-        onLeavePopper: SimpleFunction,
-    },
-
-}) {
-    return getBaseTrigger(triggerName, {
-        model,
-        openModel,
-        show,
-        hide,
-
-        hoverOpenDelay,
-        hoverCloseDelay,
-        reference,
-
-        on: {
-            onEnterReference: (cb) => reference.addEventListener('mouseenter', cb),
-            onLeaveReference: (cb) => reference.addEventListener('mouseleave', cb),
-            onReferenceFocus: (cb) => reference.addEventListener('focus', cb),
-            onReferenceBlur: (cb) => reference.addEventListener('blur', cb),
-
-            onEnterPopper: on.onEnterPopper,
-            onLeavePopper: on.onLeavePopper,
-            onClickReference: on.onClickReference,
-            onClickBody: on.onClickBody,
-            onClickPopper: on.onClickPopper,
-        },
-        off: {
-            onEnterReference: (cb) => reference.removeEventListener('mouseenter', cb),
-            onLeaveReference: (cb) => reference.removeEventListener('mouseleave', cb),
-            onReferenceFocus: (cb) => reference.removeEventListener('focus', cb),
-            onReferenceBlur: (cb) => reference.removeEventListener('blur', cb),
-
-            onEnterPopper: off.onEnterPopper,
-            onLeavePopper: off.onLeavePopper,
-            onClickReference: off.onClickReference,
-            onClickBody: off.onClickBody,
-            onClickPopper: off.onClickPopper,
-        },
-        emit: emit,
-    })
-}

package/src/packages/PlProgressBar/index.tsx

@@ -1,86 +0,0 @@
-import './progress-bar.scss'
-import {computed, designComponent, useRefs} from "plain-design-composition";
-import {PROGRESS_DEFAULT_PROPS} from "./progress.utils";
-import React from 'react';
-import PlIcon from "../PlIcon";
-
-export const PlProgressBar = designComponent({
-    name: 'pl-progress-bar',
-    props: {
-        ...PROGRESS_DEFAULT_PROPS,
-
-        width: {type: String, default: '300px'},
-        height: {type: String, default: '6px'},
-        inlineText: {type: Boolean},
-    },
-    inheritPropsType: HTMLDivElement,
-    setup({props}) {
-
-        const {refs, onRef} = useRefs({el: HTMLDivElement})
-
-        const iconColor = computed(() => {
-            switch (props.status) {
-                case 'success':
-                    return props.successColor
-                case 'error':
-                    return props.errorColor
-                default:
-                    return null
-            }
-        })
-
-        const outerStyles = computed(() => ({
-            height: !!props.inlineText ? '16px' : props.height,
-            width: props.width,
-            backgroundColor: props.outerColor,
-            borderRadius: props.width,
-        }))
-
-        const innerStyles = computed(() => ({
-            width: `${props.modelValue}%`,
-            backgroundColor: iconColor.value || props.innerColor,
-            borderRadius: props.width,
-        }))
-
-        return {
-            refer: {refs},
-            render: () => (
-                <div className="pl-progress-bar" ref={onRef.el}>
-                    <div className="pl-progress-bar-outer" style={outerStyles.value}>
-                        <div className="pl-progress-bar-inner" style={innerStyles.value}>
-                            {props.inlineText && props.modelValue > 20 && (
-                                <div>
-                                    <div className="pl-progress-bar-content">
-                                        {props.status === 'success' && <PlIcon icon="el-icon-check-bold" className="pl-progress-bar-icon-success" style={{color: 'white'}}/>}
-                                        {props.status === 'error' && <PlIcon icon="el-icon-close-bold" className="pl-progress-bar-icon-error" style={{color: 'white'}}/>}
-                                        {props.status !== 'success' && props.status !== 'error' && <span>{props.modelValue}%</span>}
-                                    </div>
-                                </div>
-                            )}
-                        </div>
-                        {props.inlineText && props.modelValue < 20 && (
-                            <div>
-                                <div className="pl-progress-bar-content">
-                                    {props.status === 'success' && <PlIcon icon="el-icon-check-bold" className="pl-progress-bar-icon-success" style={{color: props.successColor}}/>}
-                                    {props.status === 'error' && <PlIcon icon="el-icon-close-bold" className="pl-progress-bar-icon-error" style={{color: props.errorColor}}/>}
-                                    {props.status !== 'success' && props.status !== 'error' && <span>{props.modelValue}%</span>}
-                                </div>
-                            </div>
-                        )}
-                    </div>
-                    {
-                        !props.inlineText && (
-                            <div className="pl-progress-bar-content">
-                                {props.status === 'success' && <PlIcon icon="el-icon-success" className="pl-progress-bar-icon-success" style={{color: props.successColor}}/>}
-                                {props.status === 'error' && <PlIcon icon="el-icon-error" className="pl-progress-bar-icon-error" style={{color: props.errorColor}}/>}
-                                {props.status !== 'success' && props.status !== 'error' && <span>{props.modelValue}%</span>}
-                            </div>
-                        )
-                    }
-                </div>
-            )
-        }
-    },
-})
-
-export default PlProgressBar

package/src/packages/PlProgressBar/progress-bar.scss

@@ -1,42 +0,0 @@
-@include theme {
-    .pl-progress-bar {
-        display: inline-flex;
-        align-items: center;
-        vertical-align: middle;
-
-        .pl-progress-bar-content {
-            display: inline-block;
-            width: 50px;
-            text-align: left;
-            font-size: 14px;
-            padding: 0 6px;
-
-            .pl-icon {
-                vertical-align: -0.1em;
-            }
-        }
-
-        .pl-progress-bar-outer {
-            display: inline-flex;
-            align-items: center;
-            overflow: hidden;
-
-            .pl-progress-bar-inner {
-                height: 100%;
-                display: inline-flex;
-                align-items: center;
-                justify-content: flex-end;
-
-                transition: all $transition 300ms;
-
-                .pl-progress-bar-content {
-                    text-align: right;
-
-                    span {
-                        color: white;
-                    }
-                }
-            }
-        }
-    }
-}

package/src/packages/PlProgressBar/progress.utils.ts

@@ -1,9 +0,0 @@
-export const PROGRESS_DEFAULT_PROPS = {
-    modelValue: {type: Number, default: 100},                           // 进度百分比，双向绑定值
-    outerColor: {type: String, default: '#f2f2f2'},                     // 外层未激活颜色
-    innerColor: {type: String, default: '#1d39c4'},                     // 内层已经激活颜色
-    speed: {type: Number, default: 3},                                  // 动画速度
-    status: {type: String, default: 'normal'},                          // 状态
-    successColor: {type: String, default: '#08979c'},                   // 成功状态颜色
-    errorColor: {type: String, default: '#cf1322'},                     // 失败状态颜色
-}