npm - plain-design - Versions diffs - 0.0.97 → 1.0.0-beta.2 - Mend

plain-design 0.0.97 → 1.0.0-beta.2

Files changed (1350) hide show

package/src/packages/PlStepGroup/step-group.scss DELETED Viewed

@@ -1,404 +0,0 @@
-@include theme {
-    .pl-step-group {
-        .pl-step {
-            .pl-step-title {
-                font-size: 16px;
-                color: $ihc;
-            }
-            .pl-step-content {
-                font-size: 14px;
-            }
-            .pl-step-dot {
-                width: 12px;
-                height: 12px;
-                border-radius: 12px;
-                display: inline-block;
-            }
-        }
-        &:not(.pl-step-group-dot-icon ) {
-            .pl-step-icon {
-                width: 32px;
-                height: 32px;
-                font-size: 16px;
-                line-height: 32px;
-                text-align: center;
-                border-radius: 32px;
-                border: solid 1px $ibc;
-                display: inline-block;
-                color: $icc;
-                margin: 0 8px;
-                .pl-icon, .pl-loading {
-                    font-size: 1.8em;
-                }
-                .pl-step-number {
-                    .pl-icon {
-                        font-size: 1.2em;
-                    }
-                }
-            }
-        }
-        &.pl-step-group-horizontal {
-            display: flex;
-            align-items: center;
-            .pl-step {
-                flex: 1;
-                .pl-step-divider {
-                    flex: 1;
-                    height: 1px;
-                    background-color: $ibl;
-                }
-                .pl-step-head, .pl-step-body {
-                    display: flex;
-                }
-                .pl-step-head {
-                    align-items: center;
-                    margin-bottom: 8px;
-                    .pl-step-title {
-                        margin-right: 8px;
-                    }
-                    .pl-step-dot {
-                        margin-right: 8px;
-                    }
-                }
-                .pl-step-body {
-                    align-items: flex-start;
-                    .pl-step-icon {
-                        border: none;
-                    }
-                    .pl-step-title {
-                        margin-bottom: 8px;
-                    }
-                }
-                &.pl-step-last {
-                    flex: initial;
-                }
-            }
-            &.pl-step-group-title-align-bottom {
-                .pl-step {
-                    &:first-child {
-                        .pl-step-head {
-                            .pl-step-divider:first-child {
-                                background-color: transparent !important;
-                            }
-                        }
-                    }
-                    &:last-child {
-                        flex: 1;
-                        .pl-step-head {
-                            .pl-step-divider:last-child {
-                                background-color: transparent !important;
-                            }
-                        }
-                    }
-                }
-                .pl-step-body {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    justify-content: center;
-                }
-            }
-        }
-        &.pl-step-group-vertical {
-            display: flex;
-            flex-direction: column;
-            flex-wrap: revert;
-            .pl-step {
-                display: flex;
-                .pl-step-head {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    .pl-step-divider {
-                        flex: 1;
-                        width: 1px;
-                        background-color: $ibl;
-                    }
-                }
-                .pl-step-body {
-                    flex: 1;
-                    display: flex;
-                    flex-direction: column;
-                    .pl-step-title {
-                        line-height: 32px;
-                    }
-                    .pl-step-content {
-                        padding: 8px 0;
-                    }
-                }
-                &:last-child {
-                    .pl-step-head .pl-step-divider {
-                        display: none;
-                    }
-                }
-            }
-        }
-        .pl-step {
-            &.pl-step-has-icon {
-                .pl-step-head {
-                    .pl-step-icon {
-                        border: none;
-                        position: relative;
-                        top: 1px;
-                    }
-                }
-            }
-            &.pl-step-status-wait {
-                .pl-step-title {
-                    color: $icc;
-                }
-                .pl-step-content {
-                    color: $icc;
-                }
-                .pl-step-dot {
-                    border: solid 1px $icc;
-                    background-color: white;
-                }
-            }
-            &.pl-step-status-finish {
-                .pl-step-head {
-                    .pl-step-icon {
-                        border-color: $colorPrimary;
-                        color: $colorPrimary;
-                    }
-                    .pl-step-dot {
-                        background-color: $colorPrimary;
-                    }
-                    .pl-step-divider.pl-step-divider-next {
-                        background-color: $colorPrimary;
-                    }
-                }
-                & + .pl-step {
-                    .pl-step-head {
-                        .pl-step-divider-prev {
-                            background-color: $colorPrimary;
-                        }
-                    }
-                }
-            }
-            &.pl-step-status-process {
-                .pl-step-head {
-                    .pl-step-icon {
-                        border-color: $colorPrimary;
-                        background-color: $colorPrimary;
-                        color: white;
-                    }
-                    .pl-step-title {
-                        color: $colorPrimary;
-                    }
-                    .pl-step-dot {
-                        border: solid 4px $colorPrimary;
-                        box-sizing: border-box;
-                        background-color: white;
-                    }
-                }
-                .pl-step-body {
-                    .pl-step-content {
-                        color: $colorPrimary;
-                    }
-                    .pl-step-title {
-                        color: $colorPrimary;
-                    }
-                }
-                &.pl-step-has-icon {
-                    .pl-step-icon {
-                        border-color: transparent;
-                        background-color: transparent;
-                        color: $colorPrimary;
-                    }
-                }
-            }
-            &.pl-step-status-error {
-                .pl-step-head {
-                    .pl-step-icon {
-                        border-color: $colorError;
-                        background-color: $colorError;
-                        color: white;
-                    }
-                    .pl-step-title {
-                        color: $colorError;
-                    }
-                    .pl-step-dot {
-                        background-color: $colorError;
-                    }
-                }
-                .pl-step-body {
-                    .pl-step-content {
-                        color: $colorError;
-                    }
-                    .pl-step-title {
-                        color: $colorError;
-                    }
-                }
-                &.pl-step-has-icon {
-                    .pl-step-icon {
-                        border-color: transparent;
-                        background-color: transparent;
-                        color: $colorError;
-                    }
-                }
-            }
-        }
-        &.pl-step-group-mini {
-            &:not(.pl-step-group-dot-icon) {
-                .pl-step-icon {
-                    width: 20px;
-                    height: 20px;
-                    font-size: 12px;
-                    line-height: 20px;
-                    text-align: center;
-                    border-radius: 20px;
-                    border: solid 1px $ibc;
-                    display: inline-block;
-                    color: $icc;
-                    margin: 0 8px;
-                    .pl-icon, .pl-loading {
-                        font-size: 1.8em;
-                    }
-                    .pl-step-number {
-                        .pl-icon {
-                            font-size: 1.2em;
-                        }
-                    }
-                }
-            }
-            .pl-step-title {
-                font-size: 14px;
-            }
-            .pl-step-content {
-                font-size: 12px;
-            }
-            &.pl-step-group-vertical {
-                .pl-step {
-                    .pl-step-body {
-                        .pl-step-title {
-                            line-height: 20px;
-                        }
-                    }
-                }
-            }
-        }
-        &.pl-step-group-dot-icon {
-            .pl-step {
-                .pl-step-head {
-                    .pl-step-icon {
-                        background-color: transparent;
-                    }
-                }
-            }
-            &.pl-step-group-horizontal:not(.pl-step-group-vertical) {
-                .pl-step {
-                    .pl-step-content {
-                        padding-left: 20px;
-                    }
-                }
-            }
-            &.pl-step-group-title-align-bottom {
-                .pl-step .pl-step-head .pl-step-dot {
-                    margin-right: 0;
-                }
-            }
-            &.pl-step-group-vertical {
-                .pl-step-head {
-                    margin-right: 8px;
-                    position: relative;
-                    .pl-step-divider {
-                        position: absolute;
-                        left: 5px;
-                        top: 22px;
-                        bottom: -10px;
-                    }
-                }
-                .pl-step-icon {
-                    margin-top: 10px;
-                    height: 12px;
-                    display: inline-block;
-                    .pl-step-dot {
-                        float: left;
-                    }
-                }
-                &.pl-step-group-mini {
-                    .pl-step-icon {
-                        margin-top: 5px;
-                    }
-                    .pl-step-head {
-                        .pl-step-divider {
-                            position: absolute;
-                            left: 5px;
-                            top: 16px;
-                            bottom: -5px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

package/src/packages/PlStepGroup/step.utils.ts DELETED Viewed

@@ -1,44 +0,0 @@
-/*节点状态类型*/
-export enum StepStatus {
-    wait = 'wait',
-    finish = 'finish',
-    process = 'process',
-    error = 'error',
-}
-export const StepUtils = {
-    getCurrentIndex: (current: any, items: any[]) => {
-        if (typeof current === "number") {
-            return current
-        } else {
-            for (let i = 0; i < items.length; i++) {
-                const item = items[i];
-                console.log(item, i)
-                if (item.props.val === current) return i
-            }
-        }
-    },
-    getStepStatus: (
-        group: { currentStatus: StepStatus, currentIndex: { value: number } },
-        child: { status: StepStatus, index: { value: number } }
-    ): StepStatus | null => {
-        const {currentStatus, currentIndex} = group
-        const {status, index} = child
-        if (!!status) return status as StepStatus
-        if (currentIndex.value > index.value) {
-            return StepStatus.finish
-        } else if (currentIndex.value === index.value) {
-            if (!!currentStatus) {
-                return currentStatus as StepStatus
-            } else {
-                return StepStatus.process
-            }
-        } else if (currentIndex.value < index.value) {
-            return StepStatus.wait
-        } else {
-            return null
-        }
-    }
-}

package/src/packages/PlTab/index.tsx DELETED Viewed

@@ -1,43 +0,0 @@
-import './tab.scss'
-import {designComponent, useRefs} from "plain-design-composition";
-import {TabCollector} from "../PlTabs";
-import React from 'react';
-export const PlTab = designComponent({
-    name: 'pl-tab',
-    inheritAttrs: false,
-    props: {
-        title: {type: String},                              // 页签标题
-        init: {type: Boolean},                              // 是否立即初始化（默认第一次点击页签的时候才会初始化内容）
-        val: {type: [String, Number]},                      // 页签唯一标识，用于 pl-tabs 绑定值
-        destroyOnHide: {type: Boolean},                     // 是否再隐藏页签的时候销毁页签页面(重新打开页签的时候，页签内容会重新初始化)
-    },
-    slots: ['default'],
-    scopeSlots: {
-        head: (data: { active: boolean }) => {},
-    },
-    emits: {
-        onClose: () => true,
-    },
-    setup({props, slots, scopeSlots, event, attrs}) {
-        const {refs, onRef} = useRefs({
-            el: HTMLSpanElement,
-        })
-        TabCollector.child({sort: () => refs.el!})
-        // console.log('attrs', {...attrs})
-        return {
-            refer: {
-                slots,
-                scopeSlots,
-                props,
-                event,
-                attrs,
-            },
-            render: () => (<span ref={onRef.el}>{props.title}</span>)
-        }
-    }
-})
-export type PlTabComponent = typeof PlTab.use.class
-export default PlTab

package/src/packages/PlTab/tab.scss DELETED Viewed

@@ -1,6 +0,0 @@
-@include theme {
-  /*.pl-inner-tab {
-    transform-origin: left top;
-    transition: all 500ms $transition;
-  }*/
-}

package/src/packages/PlTable/index.tsx DELETED Viewed

@@ -1,181 +0,0 @@
-import {computed, designComponent, inject, onMounted, PropType, reactive, useClasses, useRefs, watch} from "plain-design-composition";
-import {TableDefaultRowHeight, TableHoverPart, TableProps} from "./table/utils/table.utils";
-import {useTree} from "../PlTree/core/useTree";
-import {TableNode, useTableNode} from "./table/use/useTableNode";
-import {PlainScroll} from "../PlScroll";
-import React from "react";
-import {StyleShape, StyleSize, useStyle} from "../../use/useStyle";
-import {usePlcList} from "./plc/format/usePlcList";
-import {useBindScroll} from "./table/use/useBindScroll";
-import {useFixedShadow} from "./table/use/useFixedShadow";
-import {hasClass} from "plain-utils/dom/hasClass";
-import {PltHead} from "./table/head/head";
-import {PltBody} from "./table/body/body";
-import {PlLoadingMask} from "../PlLoadingMask";
-import {getFormRuleData} from "../PlForm/form.validate";
-import {useTableHooks} from "./table/use/useTableHooks";
-import {removeUnit} from "plain-utils/string/removeUnit";
-import {getPropsState, tPlcCacheStateData} from "./plc/utils/usePropsState";
-import {tPlcType} from "./plc/utils/plc.type";
-import {tPlcData} from "./plc/format/formatPlcList";
-import noDataImg from './assets/no_data.svg'
-import {PlEmpty} from "../PlEmpty";
-export const PlTable = designComponent({
-    name: 'pl-table',
-    props: {
-        ...TableProps
-    },
-    provideRefer: true,
-    emits: {
-        ...useTree.createEvent<TableNode>(),
-        onScrollLeft: (scrollLeft: number, part: TableHoverPart) => true,
-        onVirtualMounted: (data: { scroll: PlainScroll }) => true,
-        onClickRow: (node: TableNode, e: React.MouseEvent) => true,
-        onDblclickRow: (node: TableNode, e: React.MouseEvent) => true,
-        onClickCell: (node: TableNode, e: React.MouseEvent) => true,
-        onDblclickCell: (node: TableNode, e: React.MouseEvent) => true,
-        onClickHead: (plc: tPlcType, e: React.MouseEvent) => true,
-        onConfigPlc: (data: { plcList: tPlcType[], stateData: tPlcCacheStateData }) => true,
-        onCollectPlcData: (plcData: tPlcData) => true,
-    },
-    slots: ['default'],
-    setup({props, slots, event}) {
-        const {emit} = event
-        const {refs, onRef} = useRefs({el: HTMLDivElement})
-        const hooks = useTableHooks()
-        const {plcData, renderCollector} = usePlcList({props, hooks, slots, onCollectPlcData: event.emit.onCollectPlcData})
-        const {bindScroll} = useBindScroll(event)
-        const {state, flatNodes, summaryNodes, dataModel, methods, current, handler, utils} = useTableNode({props, emit, getValidate: () => formValidate.value})
-        const {fixedShadowClass} = useFixedShadow(event)
-        const {styleComputed} = useStyle({
-            adjust: config => {
-                config.shape = props.shape as any || StyleShape.square
-                config.size = props.size as any || StyleSize.normal
-                config.status = props.status as any
-            }
-        })
-        const {numberState} = (() => {
-            const watchValue = computed(() => {
-                const {bodyRowHeight: propsBodyRowHeight, headRowHeight: propsHeadRowHeight,} = props
-                let {size} = styleComputed.value
-                if (!size) {size = StyleSize.normal}
-                const bodyRowHeight = Number(propsBodyRowHeight == null ? removeUnit(TableDefaultRowHeight.body[size]) : propsBodyRowHeight)
-                const headRowHeight = Number(propsHeadRowHeight == null ? removeUnit(TableDefaultRowHeight.head[size]) : propsHeadRowHeight)
-                return {bodyRowHeight, headRowHeight}
-            })
-            const numberState = reactive({...watchValue.value,})
-            watch(watchValue, () => Object.assign(numberState, watchValue.value))
-            return {numberState}
-        })();
-        const formValidate = computed(() => getFormRuleData({
-            formProps: {rules: props.rules},
-            formItems: {
-                value: !plcData.value ? [] : plcData.value.sourceFlatPlcList.map(plc => ({
-                    props: {
-                        label: plc.props.title,
-                        field: plc.props.field,
-                        required: plc.props.required,
-                        rules: plc.props.rules,
-                    }
-                }))
-            },
-            // todo
-            requiredMessage: '必填',
-        }))
-        /*是否可以启用虚拟滚动*/
-        const disabledVirtual = computed(() => {
-            if (props.virtual === false) {return true}
-            /*如果有的列不能启动虚拟滚动，那么会增加一个hook拦截器，hooks.onDisabledVirtual.exec会返回true*/
-            return hooks.onDisabledVirtual.exec(false)
-        })
-        const classes = useClasses(() => [
-            'pl-table',
-            `pl-table-size-${styleComputed.value.size}`,
-            `pl-table-shape-${styleComputed.value.shape}`,
-            {
-                'pl-table-border': props.border,
-                'pl-table-stripe': props.stripe,
-            },
-            ...fixedShadowClass.value,
-        ])
-        const exposeHandler = {
-            ...handler,
-            onClickRow: (e: React.MouseEvent, node: TableNode) => {
-                methods.setCurrent(node.key);
-                emit.onClickRow(node, e);
-                hasClass(e.target as HTMLElement, 'plt-cell') && emit.onClickCell(node, e);
-            },
-            onDblclickRow: (e: React.MouseEvent, node: TableNode) => {
-                emit.onDblclickRow(node, e)
-                hasClass(e.target as HTMLElement, 'plt-cell') && emit.onDblclickCell(node, e);
-            }
-        }
-        const emitConfigPlc = () => {
-            hooks.onConfigPlc.exec({plcList: plcData.value!.sourceList, stateData: getPropsState(plcData.value!.sourceList)})
-        }
-        const refer = {
-            refs,
-            onRef,
-            props,
-            numberState,
-            plcData,
-            bindScroll,
-            event,
-            dataModel,
-            state, flatNodes, summaryNodes,
-            disabledVirtual,
-            handler: exposeHandler,
-            ...methods,
-            formValidate,
-            current,
-            utils,
-            hooks,
-            slots,
-            emitConfigPlc,
-        }
-        onMounted(() => {
-            hooks.onTableMounted.exec(refs.el!)
-            hooks.onConfigPlc.use(data => event.emit.onConfigPlc(data))
-        })
-        return {
-            refer,
-            render: () => (
-                <div className={classes.value} ref={onRef.el}>
-                    {renderCollector()}
-                    {!!plcData.value && <>
-                        {!props.hideHeader && <PltHead table={refer}/>}
-                        <PltBody table={refer}/>
-                    </>}
-                    {refer.flatNodes.value.length === 0 && refer.plcData.value && (
-                        <div className="pl-table-no-data">
-                            <PlEmpty/>
-                        </div>
-                    )}
-                    <PlLoadingMask modelValue={props.loading || state.root.loading}/>
-                </div>
-            )
-        }
-    },
-})
-export default PlTable
-export const PlainTable = Object as PropType<typeof PlTable.use.class>
-export type tPlTable = typeof PlTable.use.class
-export function injectPlainTable() {return PlTable.use.inject()}

package/src/packages/PlTable/plc/core/Plc.tsx DELETED Viewed

@@ -1,22 +0,0 @@
-import {designComponent} from "plain-design-composition";
-import {PlcEmitsOptions, PlcPropsOptions} from "../utils/plc.utils";
-import React from "react";
-import {PlcScopeSlotsOptions} from "../utils/plc.scope-slots";
-import {useBasePlc} from "./useBasePlc";
-import {applyPropsState, getPropsState} from "../utils/usePropsState";
-export const Plc = designComponent({
-    name: 'plc',
-    props: PlcPropsOptions,
-    scopeSlots: PlcScopeSlotsOptions,
-    emits: PlcEmitsOptions,
-    setup({props, slots, scopeSlots, event}) {
-        return useBasePlc({props, scopeSlots, event, slots})
-    },
-    expose: {
-        applyPropsState,
-        getPropsState,
-    },
-})
-export default Plc