plain-design 0.0.97 → 1.0.0-beta.10

package/src/packages/PlSelect/index.tsx

@@ -1,333 +0,0 @@
-import './select.scss'
-import {EditProps} from "../../use/useEdit";
-import {StyleProps, useStyle} from "../../use/useStyle";
-import {classnames, computed, createEventListener, designComponent, PropType, reactive, ref, useModel, useRefs} from "plain-design-composition";
-import {PlSelectOption, SelectOption} from "../PlSelectOption";
-import {PlInput} from "../PlInput";
-import {PlSelectPanel} from "./PlSelectPanel";
-import {useEditPopperAgent} from "../useEditPopperAgent/useEditPopperAgent";
-import {useSelect} from "./useSelect";
-import React, {ReactNode} from "react";
-import {handleKeyboard} from "../keyboard";
-import {PlInputInnerTags} from "../PlInput/PlInputInnertags";
-import PlIcon from "../PlIcon";
-import {useCollect} from "../../use/useCollect";
-import PlPopper from "../PlPopper";
-
-const Props = {
-    ...EditProps,
-    ...StyleProps,
-
-    modelValue: {type: [String, Number, Array]},
-    filterable: {type: Boolean, default: true},                     // 是否可以输入筛选
-    inputProps: {type: Object as PropType<Partial<typeof PlInput.use.props>>},                                     // input组件绑定属性对象
-
-    multiple: {type: Boolean},                                      // 是否多选
-    multipleMaxLimit: {type: Number},                               // 多选最多选择个数
-    multipleMinLimit: {type: Number},                               // 多选最少选择个数
-    collapseTags: {type: Boolean, default: true},                   // 多选模式下，默认超过三个选项，其他的将省略显示
-    maxTags: {type: Number, default: 3},                            // 最多战士的tag的个数
-
-    empty: {type: Function as PropType<(defaultRender: () => ReactNode) => ReactNode>},// 自定义empty内容
-    noMatchText: {type: String, default: '暂无匹配数据'},             // 筛选无数据时展示的文本
-    noDataText: {type: String, default: '暂无数据'},                 // 无数据时显示的文本
-    filterMethod: Function,                                         // 筛选过滤函数
-    displayValue: {type: String},                                   // 输入框显示的文本
-    popperAttrs: {type: Object as PropType<Partial<typeof PlPopper.use.props>>},
-}
-
-export const PlSelect = designComponent({
-    name: 'pl-select',
-    props: {
-        ...Props,
-    },
-    emits: {
-        onUpdateModelValue: (val?: number | string | string[]) => true,
-        onInputChange: (val: string | null) => true,
-        onClick: (option: SelectOption) => true,
-
-        onSpace: (e: React.KeyboardEvent) => true,
-        onEnter: (e: React.KeyboardEvent) => true,
-        onUp: (e: React.KeyboardEvent) => true,
-        onDown: (e: React.KeyboardEvent) => true,
-        onEsc: (e: React.KeyboardEvent) => true,
-
-        onBlur: (e: React.FocusEvent) => true,
-        onFocus: (e: React.FocusEvent) => true,
-    },
-    slots: ['default'],
-    setup({props, slots, event}) {
-
-        useStyle()
-        const {refs, onRef} = useRefs({input: PlInput,})
-
-        /*对 pl-select-panel 的引用*/
-        let panel = null as typeof PlSelectPanel.use.class | null
-
-        /*---------------------------------------state-------------------------------------------*/
-
-        const model = useModel(() => props.modelValue as number | string | string[] | undefined, event.emit.onUpdateModelValue)
-        const filterText = ref(null as string | null)
-        const panelContentRender = (() => {
-            const state = reactive({
-                render: () => slots.default(),
-                reset: () => (state.render = () => slots.default())
-            })
-            return state
-        })()
-        const agentState = useEditPopperAgent({
-            event,
-            serviceGetter: useSelect,
-            option: {
-                reference: () => refs.input?.refs.input,
-                renderAttrs: () => ({
-                    ref: r => panel = r,
-                    ...(() => {
-                        const {loading, readonly, customReadonly, collapseTags, maxTags, inputProps, filterable, ...leftProps} = Props
-                        return Object.keys(leftProps).reduce((ret: any, key) => {
-                            ret[key] = (props as any)[key]
-                            return ret
-                        }, {})
-                    })(),
-                    modelValue: model.value,
-                    height: popperHeight.value,
-                    content: panelContentRender.render,
-                    filterMethod: utils.filterMethod,
-                    onChange: handler.onServiceChange,
-                    onClick: event.emit.onClick,
-                }),
-                popperAttrs: ({
-                    ...props.popperAttrs as any,
-                    onMousedownPopper: () => agentState.state.focusCounter++,
-                    onClickPopper: () => refs.input!.methods.focus(),
-                    onHide: () => filterText.value = null,
-                }),
-            },
-        })
-
-        /*---------------------------------------utils-------------------------------------------*/
-
-        const utils = {
-            filterMethod: (option: { label?: string, val: string, disabled: boolean }) => {
-                if (!!props.filterMethod) return props.filterMethod(filterText.value, option)
-                return !!filterText.value && !!filterText.value.trim() ? (!!option.label && option.label.indexOf(filterText.value) > -1) : true
-            }
-        }
-
-        /*---------------------------------------computed-------------------------------------------*/
-
-        /**
-         * 收集的option实例
-         * @author  韦胜健
-         * @date    2020/6/8 11:16
-         */
-        const items = SelectCollector.parent()
-        /**
-         * 有效的 pl-select-option
-         * @author  韦胜健
-         * @date    2020/12/4 10:06
-         */
-        const formatData = computed(() => items.filter(i => !i.props.group))
-        /**
-         * popper应该的高度
-         * @author  韦胜健
-         * @date    2020/12/4 10:06
-         */
-        const popperHeight = computed(() => formatData.value.length > 6 ? 200 : null)
-        /**
-         * 显示值
-         * @author  韦胜健
-         * @date    2020/6/8 11:16
-         */
-        const displayValue = computed(() => {
-            if (!props.multiple) {
-                if (!!props.displayValue) {
-                    return props.displayValue
-                }
-                for (let i = 0; i < formatData.value.length; i++) {
-                    const item = formatData.value[i];
-                    if (item.props.val == model.value) {
-                        return item.props.label
-                    }
-                }
-                return model.value as string
-            } else {
-                let strings: string[] = []
-                if (!!model.value && Array.isArray(model.value)) {
-                    for (let i = 0; i < formatData.value.length; i++) {
-                        const item = formatData.value[i];
-                        if (model.value.indexOf(item.props.val! as string) > -1) {
-                            strings.push(item.props.label! as string)
-                        }
-                    }
-                }
-                return strings.join('').trim()
-            }
-        })
-
-        /**
-         * 给input组件传递的属性
-         * @author  韦胜健
-         * @date    2020/12/4 11:21
-         */
-        const inputProps = computed(() => Object.assign({}, props.inputProps || {}))
-
-        /**
-         * 当前显示的空值占位符
-         * @author  韦胜健
-         * @date    2020/12/4 11:21
-         */
-        const placeholderValue = computed(() => {
-            if (agentState.isShow.value) {
-                return displayValue.value
-            }
-            if (!!inputProps.value.placeholder) {
-                return inputProps.value.placeholder
-            }
-            return agentState.editComputed.value.placeholder
-        })
-
-        /**
-         * 给input组件绑定的目标对象
-         * @author  韦胜健
-         * @date    2020/12/4 11:21
-         */
-        const inputBinding = computed(() => {
-            /*onEnter不要了，只要剩余的时间监听器*/
-            const {onEnter, ...inputHandler} = agentState.inputHandler
-            return {
-                ref: onRef.input,
-                className: classnames([
-                    'pl-select',
-                    {
-                        'pl-input-tags': !!props.multiple,
-                        'pl-select-input-show': agentState.isShow.value,
-                    }
-                ]),
-
-                modelValue: (props.filterable && agentState.isShow.value) ? filterText.value! : displayValue.value as string,
-                placeValue: displayValue.value as string,
-                inputReadonly: !props.filterable,
-                placeholder: placeholderValue.value as string,
-                suffixIcon: 'el-icon-arrow-down',
-                clearIcon: true,
-                isFocus: agentState.state.focusCounter > 0,
-                clearHandler: handler.onInputClear,
-
-                ...inputHandler,
-                onChange: handler.onInputChange,
-                onKeydown: handler.onInputKeydown,
-
-                ...inputProps.value,
-            }
-        })
-
-        const multipleTags = computed(() => {
-            if (!model.value) {
-                return []
-            }
-            if (!Array.isArray(model.value)) {
-                console.error('The value of multiple select should be array')
-                return []
-            }
-            if (!formatData.value || formatData.value.length === 0) return []
-            return formatData.value.filter(option => (model.value as any[]).indexOf(option.props.val!) > -1)
-        })
-
-        /*---------------------------------------handler-------------------------------------------*/
-
-        const handler = {
-            onInputKeydown: handleKeyboard({
-                space: (e) => {
-                    if (props.multiple && agentState.isShow.value) {
-                        e.stopPropagation()
-                        e.preventDefault()
-                        panel!.methods.selectHighlight()
-                    }
-                    event.emit.onSpace(e)
-                },
-                enter: (e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    if (agentState.isShow.value) {
-                        panel!.methods.selectHighlight()
-                    } else {
-                        agentState.methods.show()
-                    }
-                },
-                up: (e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    if (!!agentState.isShow.value) {
-                        panel!.methods.highlightPrev()
-                    }
-                },
-                down: (e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    if (!!agentState.isShow.value) {
-                        panel!.methods.highlightNext()
-                    }
-                },
-                esc: (e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    if (!!agentState.isShow.value) {
-                        agentState.methods.hide()
-                    }
-                },
-            }),
-            onServiceChange: (val: any) => model.value = val,
-            onInputClear: () => model.value = undefined,
-            onInputChange: (val: string | null) => {
-                filterText.value = val
-                event.emit.onInputChange(val)
-                if (!agentState.isShow.value) {
-                    agentState.methods.show()
-                }
-            },
-            onClickItemCloseIcon: (item: SelectOption, index: number) => {
-                index = (model.value as any[]).indexOf(item.props.val!)
-                if (index > -1) {
-                    const value = [...(model.value as any[])]
-                    value.splice(index, 1)
-                    model.value = [...value]
-                }
-            }
-        }
-
-        return {
-            render: () => {
-                panelContentRender.reset()
-                return (
-                    <PlInput {...inputBinding.value}>
-                        {{
-                            hidden: () => slots.default(),
-                            default: !props.multiple ? null : () => (
-                                <PlInputInnerTags
-                                    data={multipleTags.value}
-                                    collapseTags={props.collapseTags}
-                                    maxTags={props.maxTags}
-                                    placeholder={inputBinding.value.placeholder!}
-                                    default={({item, index}: { item: SelectOption, index: number }) => (
-                                        <React.Fragment key={index}>
-                                            <span>{item.props.label}</span>
-                                            <PlIcon icon="el-icon-close" {...createEventListener({onClick: () => handler.onClickItemCloseIcon(item, index)})}/>
-                                        </React.Fragment>
-                                    )}
-                                />
-                            )
-                        }}
-                    </PlInput>
-                )
-            }
-        }
-    },
-})
-
-export const SelectCollector = useCollect(() => ({
-    parent: PlSelect,
-    child: PlSelectOption,
-}))
-
-export default PlSelect

package/src/packages/PlSelect/select.scss

@@ -1,90 +0,0 @@
-@include theme {
-
-  .pl-select-panel {
-
-    .pl-select-panel-empty-text {
-      color: $disabledText;
-      font-size: 12px;
-      height: 60px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-
-      .pl-icon {
-        font-size: 20px;
-        margin-bottom: 8px;
-      }
-    }
-
-    &.pl-select-panel-multiple {
-      .pl-select-option {
-        .pl-select-option-checkbox {
-          margin-right: 6px;
-        }
-
-        &.pl-select-option-selected {
-          background-color: $colorPrimaryLight;
-          color: $colorPrimary;
-        }
-      }
-    }
-  }
-
-  .pl-select-option {
-
-    &.pl-select-option-show {
-      padding: 5px 12px;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 22px;
-      color: $itc;
-      background-color: white;
-      transition: background-color linear 200ms;
-    }
-
-    &.pl-select-option-group-child {
-      padding-left: 20px;
-    }
-
-    &.pl-select-group {
-      font-size: 12px;
-      color: $icc;
-      padding: 4px 12px;
-      margin-top: 4px;
-      border-bottom: solid 1px $ibl;
-
-      .pl-icon {
-        margin-right: 6px;
-      }
-    }
-
-    .pl-select-option-icon {
-      margin-right: 6px;
-      opacity: 0.5;
-    }
-
-    &:hover, &.pl-select-option-highlight {
-      &:not(.pl-select-group) {
-        text-decoration: underline;
-      }
-
-      &:not(.pl-select-option-disabled):not(.pl-select-group):not(.pl-select-option-selected) {
-        background-color: #f2f2f2;
-        cursor: pointer;
-      }
-    }
-
-    &.pl-select-option-disabled {
-      color: $disabledText;
-      cursor: not-allowed;
-    }
-
-    &.pl-select-option-selected {
-      background-color: rgba($colorPrimary, 0.1);
-      color: $colorPrimary;
-    }
-
-  }
-
-}

package/src/packages/PlSelect/useSelect.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import {createUseEditPopperAgent} from "../useEditPopperAgent/createAgentGetter";
-import {PlSelectPanel} from "./PlSelectPanel";
-
-export const useSelect = createUseEditPopperAgent({
-    name: 'select',
-    render: (attrs) => {
-        return <PlSelectPanel {...attrs}/>
-    },
-    defaultPopperAttrs: {
-        transition: 'pl-transition-popper-drop',
-        sizeEqual: true,
-        arrow: false,
-    },
-    defaultRenderAttrs: {
-        async onChange() {
-            let renderAttrs: any = this.state.option.serviceOption.renderAttrs
-            if (typeof renderAttrs === "function") renderAttrs = renderAttrs()
-            /*非多选的情况下，默认点击关闭下拉框*/
-            if (!renderAttrs.multiple) {
-                this.hide()
-            }
-        }
-    },
-})

package/src/packages/PlSelectGroup/index.tsx

@@ -1,39 +0,0 @@
-import {computed, designComponent} from "plain-design-composition";
-import PlIcon from "../PlIcon";
-import {PlSelectOption, SelectOption} from "../PlSelectOption";
-import {PlSelectPanel} from "../PlSelect/PlSelectPanel";
-import React from "react";
-import {useCollect} from "../../use/useCollect";
-
-export const PlSelectGroup = designComponent({
-    name: 'pl-select-group',
-    slots: ['label', 'default'],
-    setup({props, slots}) {
-
-        const options = (SelectGroupCollector as any).parent() as SelectOption[]
-        const panel = PlSelectPanel.use.inject(null)
-        const isShow = computed(() => !panel || options.filter((option) => !option.props.group).filter(o => panel.utils.isShow(o.props)).length > 0)
-
-        return {
-            render: () => {
-                return (
-                    <>
-                        {isShow.value && (slots.label.isExist()) && (
-                            <PlSelectOption className="pl-select-group" group label="" val="">
-                                {slots.label()}
-                            </PlSelectOption>
-                        )}
-                        {slots.default()}
-                    </>
-                )
-            }
-        }
-    },
-})
-
-export const SelectGroupCollector = useCollect(() => ({
-    parent: PlSelectGroup,
-    child: PlSelectOption,
-}))
-
-export default PlSelectGroup

package/src/packages/PlSelectOption/index.tsx

@@ -1,88 +0,0 @@
-import {computed, designComponent, useClasses, useRefs} from "plain-design-composition";
-import {SelectGroupCollector} from "../PlSelectGroup";
-import React from "react";
-import {PlCheckbox} from "../PlCheckbox";
-import PlIcon from "../PlIcon";
-import {SelectPanelCollector} from "../PlSelect/PlSelectPanel";
-import {SelectCollector} from "../PlSelect";
-
-export const PlSelectOption = designComponent({
-    name: 'pl-select-option',
-    inheritPropsType: HTMLDivElement,
-    props: {
-        label: {type: [String, Number], required: true},
-        val: {type: [String, Number], required: true},
-        icon: {type: String},
-        disabled: {type: Boolean},
-
-        group: {type: Boolean},
-    },
-    slots: ['default'],
-    emits: {
-        onClick: (e: React.MouseEvent) => true,
-    },
-    setup({props, slots, event: {emit}}) {
-
-        const {refs, onRef} = useRefs({
-            el: HTMLDivElement,
-        })
-
-        SelectCollector.child({injectDefaultValue: null, sort: () => refs.el!})
-        const group = SelectGroupCollector.child({injectDefaultValue: null})
-        const panel = SelectPanelCollector.child({injectDefaultValue: null, sort: () => refs.el!})
-        const isShow = computed(() => (props.group || !panel || panel.utils.isShow(props)))
-        const isSelected = computed(() => !!panel && panel.utils.isSelected(props))
-
-        const refer = {
-            props,
-            refs,
-        }
-
-        const classes = useClasses(() => [
-            'pl-select-option',
-            {
-                'pl-select-option-disabled': props.disabled,
-                'pl-select-option-show': isShow.value,
-                'pl-select-option-selected': isSelected.value,
-                'pl-select-option-highlight': !!panel && !!panel.current.value && panel.current.value.props === props,
-                'pl-select-option-group-child': !!group && !props.group,
-            }
-        ])
-
-        const handler = {
-            click: (e: React.MouseEvent) => {
-                emit.onClick(e)
-                if (props.group) return
-                !!panel && panel.handler.clickOption(refer)
-            }
-        }
-
-        return {
-            refer,
-            render: () => {
-                return (
-                    /*必须要有这个div，不然收集item的时候，没法确定顺序*/
-                    <div
-                        {...{
-                            ref: onRef.el,
-                            label: props.label,
-                            val: props.val,
-                            icon: props.icon,
-                            className: classes.value,
-                            onClick: handler.click,
-                        }}>
-                        {!!panel && isShow.value && <>
-                            {!!panel.props.multiple && !props.group ? <PlCheckbox customReadonly modelValue={isSelected.value} className="pl-select-option-checkbox"/> : null}
-                            {!!props.icon && <PlIcon icon={props.icon} className="pl-select-option-icon"/>}
-                            {slots.default(props.label)}
-                        </>}
-                    </div>
-                )
-            }
-        }
-    },
-})
-
-export type SelectOption = typeof PlSelectOption.use.class
-
-export default PlSelectOption