plain-design 0.0.97 → 1.0.0-beta.2

package/src/packages/PlCollapse/index.tsx

@@ -1,94 +0,0 @@
-import './collapse.scss'
-import {createCounter} from "plain-design-composition"
-import {computed, designComponent, useModel, useRefs} from "plain-design-composition";
-import PlCollapseGroup from "../PlCollapseGroup";
-import {useClasses} from "plain-design-composition";
-import React from 'react';
-import PlIcon from "../PlIcon";
-import PlCollapseTransition from "../PlCollapseTransition";
-
-const valCounter = createCounter('collapse')
-
-export const PlCollapse = designComponent({
-    name: 'pl-collapse',
-    props: {
-        modelValue: {type: Boolean, default: true},             // 双向绑定，控制是否显示
-        detail: {type: String},                                 // 详情内容，可以用默认插槽内容代替
-        disabled: {type: Boolean, default: null},               // 禁用展开收起的功能
-        val: {type: String},                                    // 唯一标识，结合 CollapseGroup的时候使用
-        title: {type: String},                                  // 标题
-    },
-    emits: {
-        onUpdateModelValue: (val: boolean) => true
-    },
-    inheritPropsType: HTMLDivElement,
-    slots: [
-        'default',
-        'head',
-    ],
-    setup({props, event: {emit}, slots}) {
-
-        const {refs, onRef} = useRefs({el: HTMLDivElement})
-        const model = useModel(() => props.modelValue, emit.onUpdateModelValue)
-        const group = PlCollapseGroup.use.inject(null)
-
-        const selfVal = computed(() => props.val || valCounter())
-
-        const isOpen = computed(() => {
-            if (!!group) {
-                return group.utils.isOpen(selfVal.value)
-            } else {
-                return model.value
-            }
-        })
-
-        const classes = useClasses(() => [
-            'pl-collapse',
-            {
-                'pl-collapse-is-open': isOpen.value,
-            }
-        ])
-
-        const isDisabled = computed(() => {
-            if (props.disabled != null) {
-                return props.disabled
-            }
-            if (!!group) {
-                return group.props.disabled
-            }
-            return false
-        })
-
-        const handler = {
-            onClickTitle: () => {
-                if (isDisabled.value) {
-                    return
-                }
-                if (!!group) {
-                    group.handler.clickCollapseTitle(selfVal.value)
-                } else {
-                    model.value = !model.value
-                }
-            }
-        }
-
-        return {
-            refer: {refs},
-            render: () => (
-                <div className={classes.value} ref={onRef.el}>
-                    {(slots.head.isExist() || props.title) && (
-                        <div className="pl-collapse-title">
-                            <PlIcon icon="el-icon-caret-right" onClick={handler.onClickTitle}/>
-                            <div onClick={handler.onClickTitle}>{slots.head(props.title)}</div>
-                        </div>
-                    )}
-                    <div className="pl-collapse-detail" style={{display: isOpen.value && (!!props.detail || slots.default.isExist()) ? '' : 'none'}}>
-                        {slots.default(props.detail)}
-                    </div>
-                </div>
-            )
-        }
-    },
-})
-
-export default PlCollapse

package/src/packages/PlCollapseGroup/index.tsx

@@ -1,71 +0,0 @@
-import {designComponent, useModel, useRefs} from "plain-design-composition";
-import React from "react";
-
-export const PlCollapseGroup = designComponent({
-    name: 'pl-collapse-group',
-    props: {
-        modelValue: {type: [String, Array]},
-        limit: {type: Number, default: 1},
-        disabled: {type: Boolean},
-    },
-    provideRefer: true,
-    emits: {
-        onUpdateModelValue: (val: string | string[] | undefined) => true
-    },
-    inheritPropsType: HTMLDivElement,
-    slots: ['default'],
-    setup({props, event: {emit}, slots}) {
-        const {refs, onRef} = useRefs({el: HTMLDivElement})
-        const model = useModel(() => props.modelValue as string | string[] | undefined, emit.onUpdateModelValue)
-
-        const utils = {
-            isOpen: (val: string) => {
-                if (!model.value) {
-                    return
-                }
-                if (typeof model.value === "string") {
-                    return model.value == val
-                } else {
-                    return (model.value as string[]).indexOf(val) > -1
-                }
-            }
-        }
-
-        const handler = {
-            clickCollapseTitle: (val: string) => {
-                if (props.limit === 1) {
-                    model.value = val == model.value ? undefined : val
-                } else {
-                    const value = (model.value as string[] | undefined) || []
-                    const index = value.indexOf(val)
-                    if (index > -1) {
-                        value.splice(index, 1)
-                    } else {
-                        value.push(val)
-                        if (value.length > props.limit) {
-                            value.shift()
-                        }
-                    }
-                    model.value = [...value]
-                }
-            },
-        }
-
-        return {
-            refer: {
-                utils,
-                handler,
-                props,
-                model,
-                refs,
-            },
-            render: () => (
-                <div className="pl-collapse-group" ref={onRef.el}>
-                    {slots.default()}
-                </div>
-            )
-        }
-    },
-})
-
-export default PlCollapseGroup

package/src/packages/PlCollapseTransition/index.tsx

@@ -1,183 +0,0 @@
-import React from "react";
-import {designComponent, onBeforeMount, onUpdated, useReference, watch} from "plain-design-composition";
-import {findDOMNode} from "react-dom";
-import {unit} from "plain-utils/string/unit";
-import {addClass} from "plain-utils/dom/addClass";
-import {delay} from "plain-utils/utils/delay";
-import {removeClass} from "plain-utils/dom/removeClass";
-import {ClassWrapper} from "../../utils/ClassWrapper";
-
-
-type CollapseElStyles = {
-    height: string,
-    paddingTop: string,
-    paddingBottom: string,
-    overflow: string,
-    display: string,
-    scrollHeight: number,
-}
-
-enum CollapseStatus {
-    show = 'show',
-    showing = 'showing',
-    hide = 'hide',
-    hiding = 'hiding',
-}
-
-export const PlCollapseTransition = designComponent({
-    props: {
-        show: {type: Boolean},
-    },
-    slots: ['default'],
-    setup({props, slots}) {
-
-        const wrapperRef = useReference()
-
-        const state = {
-            el: null as null | HTMLElement,
-            handleTransitionEnd: null as null | (() => void),
-            status: null as null | CollapseStatus,
-            styles: null as null | CollapseElStyles,
-        }
-
-        const handler = {
-            onTransitionEnd: () => !!state.handleTransitionEnd && state.handleTransitionEnd(),
-            onUpdateEl: () => {
-                /*每次update之后，都检查一遍el是否发生了变化，是则重新添加事件*/
-                const {el: oldEl} = state
-                const newEl = findDOMNode(wrapperRef.current) as HTMLElement
-                if (oldEl === newEl) { return}
-                !!oldEl && oldEl.removeEventListener('transitionend', handler.onTransitionEnd)
-                !!newEl && newEl.addEventListener('transitionend', handler.onTransitionEnd)
-                state.el = newEl
-            },
-        }
-
-        const methods = {
-            show: async (animation = true) => {
-                const {el, status, styles} = state
-                /*没有dom元素或者已经处于显示的状态，则不做处理*/
-                if (!el || status === CollapseStatus.show || status === CollapseStatus.showing) {return}
-
-                if (status !== CollapseStatus.hiding) {
-                    /*设置当前显示，以便读取scrollHeight高度*/
-                    const display = !styles ? '' : styles.display
-                    el.style.display = display === 'none' ? '' : display
-                    state.styles = {
-                        height: el.style.height,
-                        paddingTop: el.style.paddingTop,
-                        paddingBottom: el.style.paddingBottom,
-                        overflow: el.style.overflow,
-                        display: el.style.display,
-                        scrollHeight: el.scrollHeight
-                    }
-                } else {
-                    // hiding => showing
-                }
-
-                state.handleTransitionEnd = null
-
-                if (animation) {
-                    state.status = CollapseStatus.showing
-                    /*动画开始的高度*/
-                    el.style.height = '0px';
-                    el.style.paddingTop = '0px';
-                    el.style.paddingBottom = '0px';
-                    el.style.overflow = 'hidden';
-                    // console.log('show setting')
-
-                    await delay(23)
-                    addClass(el, 'pl-collapse-transition');
-                    const {height, scrollHeight, paddingBottom, paddingTop, overflow} = state.styles!
-                    /*动画结束的高度*/
-                    el.style.height = unit(height || String(scrollHeight))!;
-                    el.style.paddingTop = unit(paddingTop)!;
-                    el.style.paddingBottom = unit(paddingBottom)!;
-
-                    state.handleTransitionEnd = async () => {
-                        /*动画结束之后，将值还原*/
-                        el.style.height = height;
-                        el.style.overflow = overflow;
-                        removeClass(el, 'pl-collapse-transition');
-                        state.status = CollapseStatus.show
-                    }
-                } else {
-                    const {height, paddingBottom, paddingTop, overflow} = state.styles!
-                    el.style.height = height;
-                    el.style.paddingTop = paddingTop;
-                    el.style.paddingBottom = paddingBottom;
-                    el.style.overflow = overflow;
-                    state.status = CollapseStatus.show
-                }
-            },
-            hide: async (animation = true) => {
-                const {el, status} = state
-                /*没有dom元素或者已经处于显示的状态，则不做处理*/
-                if (!el || status === CollapseStatus.hide || status === CollapseStatus.hiding) {return}
-
-                if (status !== CollapseStatus.showing) {
-                    state.styles = {
-                        height: el.style.height,
-                        paddingTop: el.style.paddingTop,
-                        paddingBottom: el.style.paddingBottom,
-                        overflow: el.style.overflow,
-                        display: el.style.display,
-                        scrollHeight: el.scrollHeight
-                    }
-                } else {
-                    // hiding => showing
-                }
-                state.handleTransitionEnd = null
-
-                if (animation) {
-                    state.status = CollapseStatus.hiding
-                    const {height, scrollHeight, paddingTop, paddingBottom, overflow} = state.styles!
-                    /*动画开始的高度*/
-                    el.style.height = unit(height || String(scrollHeight))!;
-                    el.style.paddingTop = unit(paddingTop)!;
-                    el.style.paddingBottom = unit(paddingBottom)!;
-                    el.style.overflow = 'hidden';
-
-                    await delay(23)
-                    addClass(el, 'pl-collapse-transition');
-
-                    /*动画结束的高度*/
-                    el.style.height = '0px';
-                    el.style.paddingTop = '0px';
-                    el.style.paddingBottom = '0px';
-                    // console.log('hide setting=========================')
-
-                    state.handleTransitionEnd = async () => {
-                        /*动画结束之后，将值还原*/
-                        el.style.height = height;
-                        el.style.paddingTop = paddingTop;
-                        el.style.paddingBottom = paddingBottom;
-                        el.style.overflow = overflow;
-                        el.style.display = 'none'
-                        removeClass(el, 'pl-collapse-transition');
-                        state.status = CollapseStatus.hide
-                    }
-                } else {
-                    el.style.display = 'none'
-                    state.status = CollapseStatus.hide
-                }
-            },
-        }
-
-        onUpdated(handler.onUpdateEl)
-
-        watch(() => props.show, val => {val ? methods.show() : methods.hide()})
-        onBeforeMount(() => {
-            handler.onUpdateEl()
-            props.show ? methods.show(false) : methods.hide(false)
-        })
-
-        return () => (
-            <ClassWrapper ref={wrapperRef}>
-                {slots.default()}
-            </ClassWrapper>
-        )
-    },
-})
-
-export default PlCollapseTransition

package/src/packages/PlColorButton/color-button.scss

@@ -1,26 +0,0 @@
-@include theme {
-  .pl-color-button {
-    border-radius: 2px;
-    height: 24px;
-    width: 24px;
-    border: solid 1px $ibc;
-    padding: 2px;
-    box-sizing: border-box;
-    display: inline-block;
-    cursor: pointer;
-    vertical-align: middle;
-
-    .pl-color-button-background {
-      background-size: 7px 7px;
-      border-radius: 2px;
-      box-sizing: border-box;
-      height: 100%;
-      width: 100%;
-
-      .pl-color-button-color {
-        height: 100%;
-        width: 100%;
-      }
-    }
-  }
-}

package/src/packages/PlColorButton/index.tsx

@@ -1,37 +0,0 @@
-import {designComponent, useRefs} from 'plain-design-composition'
-import React from 'react'
-import './color-button.scss'
-// @ts-ignore
-import opacityPng from './opacity.png'
-
-export const PlColorButton = designComponent({
-    name: 'pl-color-button',
-    props: {
-        color: {type: String}
-    },
-    emits: {
-        onClick: (e: React.MouseEvent) => true,
-    },
-    inheritPropsType: HTMLDivElement,
-    setup({props, event: {emit}}) {
-
-        const {refs, onRef} = useRefs({
-            el: HTMLDivElement,
-        })
-
-        return {
-            refer: {
-                refs,
-            },
-            render: () => (
-                <div className="pl-color-button" onClick={emit.onClick} ref={onRef.el}>
-                    <div className="pl-color-button-background" style={{backgroundImage: `url(${opacityPng})`}}>
-                        <div className="pl-color-button-color" style={{backgroundColor: props.color}}/>
-                    </div>
-                </div>
-            )
-        }
-    },
-})
-
-export default PlColorButton

package/src/packages/PlColorPicker/PlColorPanel.tsx

@@ -1,191 +0,0 @@
-import './color-panel.scss'
-import {Color, ColorFormat} from "./utils/Color";
-import {designComponent, PropType, reactive, useRefs, watch} from "plain-design-composition";
-import {PlInput} from "../PlInput";
-import {isEffectiveColorString} from "./utils/ColorUtils";
-import $$notice from "../$$notice";
-import {delay} from "plain-utils/utils/delay";
-import React from 'react';
-import {PlColorSvPanel} from './sub/PlColorSvPanel';
-import PlColorAlphaSlider from "./sub/PlColorAlphaSlider";
-import PlColorHueSlider from "./sub/PlColorHueSlider";
-import {StyleSize} from "../../use/useStyle";
-import PlButtonGroup from "../PlButtonGroup";
-import PlButton from "../PlButton";
-
-function getDefaultColor(format: ColorFormat, enableAlpha: boolean) {
-    if (format === ColorFormat.hex) {
-        return '#12b4a5'
-    } else {
-        if (enableAlpha) {
-            return 'rgba(18,180,165,0.5)'
-        } else {
-            return 'rgb(18,180,165)'
-        }
-    }
-}
-
-export const PlColorPanel = designComponent({
-    name: 'pl-color-panel',
-    props: {
-        modelValue: {type: String},                                 // 当前颜色值
-        enableAlpha: {type: Boolean},                               // 是否启用透明度
-        format: {type: String as PropType<'hex' | 'rgb'>},          // 格式类型：hex、rgb
-    },
-    emits: {
-        onUpdateModelValue: (val: any) => true,
-        onDblclickSvPanel: (e: React.MouseEvent) => true,
-    },
-    inheritPropsType: HTMLDivElement,
-    setup({props, event: {emit}}) {
-
-        const {refs, onRef} = useRefs({
-            el: HTMLElement,
-            input: PlInput,
-            svPanel: PlColorSvPanel,
-            husSlider: PlColorHueSlider,
-            alphaSlider: PlColorAlphaSlider,
-        })
-
-        const defaultColor = () => getDefaultColor(props.format as ColorFormat, props.enableAlpha as boolean)
-
-        const state = reactive({
-            val: props.modelValue,
-            color: new Color(
-                props.modelValue || defaultColor(),
-                props.enableAlpha as boolean,
-                props.format as ColorFormat
-            ),
-        })
-
-        const methods = {
-            reset: () => {
-                state.val = props.modelValue
-                state.color.setValue(props.modelValue || defaultColor())
-            },
-        }
-        const handler = {
-            svChange: ({value, saturation}: { value: number, saturation: number }) => {
-                state.color.val = value
-                state.color.saturation = saturation
-                state.color.updateByHsv()
-                state.val = state.color.color
-            },
-            hueChange: (hue: number) => {
-                state.color.hue = hue
-                state.color.updateByHsv()
-                state.val = state.color.color
-            },
-            alphaChange: (alpha: number) => {
-                state.color.alpha = alpha
-                state.color.updateByAlpha()
-                state.val = state.color.color
-            },
-            confirm: () => {
-                emit.onUpdateModelValue(state.val)
-            },
-            dblclickSvPanel: (e: React.MouseEvent) => {
-                handler.confirm()
-                emit.onDblclickSvPanel(e)
-            },
-            inputChange: (val: string) => {
-                if (!val) {
-                    state.color.setValue(val)
-                    state.val = state.color.color
-                    return
-                }
-                let formatVal = val.replace(/\s/g, '')
-                if (!isEffectiveColorString(formatVal)) {
-                    return;
-                } else {
-                    state.color.setValue(formatVal)
-                    if (val !== formatVal) {
-                        refs.input!.model.value = formatVal
-                    }
-                    state.val = state.color.color
-                }
-            },
-            inputBlur: () => {
-                if (!!refs.input!.model.value && refs.input!.model.value !== state.color.color) {
-                    $$notice.warn('请输入正确的颜色值！')
-                    refs.input!.model.value = state.color.color
-                }
-            },
-            inputEnter: async () => {
-                await delay()
-                if (!!refs.input!.model.value && refs.input!.model.value !== state.color.color) {
-                    $$notice('请输入正确的颜色值！')
-                    refs.input!.model.value = state.color.color
-                } else {
-                    handler.confirm()
-                }
-            },
-        }
-
-        /*---------------------------------------watch-------------------------------------------*/
-
-        watch(() => props.modelValue, (val) => {
-            state.color.setValue(val || defaultColor())
-            state.val = state.color.color
-        })
-
-        watch(() => props.enableAlpha, (val) => {
-            state.color.enableAlpha = val as boolean
-            state.color.updateByAlpha()
-        })
-
-        watch(() => props.format, (val) => {
-            state.color.format = val as ColorFormat || ColorFormat.hex
-            state.color.format === ColorFormat.hex ? state.color.updateByHex() : state.color.updateByRgb()
-        })
-
-        return {
-            render: () => (
-                <div className="pl-color-panel" ref={onRef.el}>
-                    <div>
-                        <PlColorSvPanel
-                            ref={onRef.svPanel}
-                            height="180"
-                            width="240"
-                            hue={state.color.hue}
-                            modelValue={state.color.val}
-                            saturation={state.color.saturation}
-                            onChange={handler.svChange} onDblclick={handler.dblclickSvPanel}/>
-
-                        {state.color.enableAlpha && (
-                            <PlColorAlphaSlider
-                                ref={onRef.alphaSlider}
-                                size="180"
-                                color={state.color.hex}
-                                modelValue={state.color.alpha}
-                                {...{onChange: handler.alphaChange}}
-                            />
-                        )}
-                    </div>
-
-
-                    <PlColorHueSlider
-                        ref={onRef.husSlider}
-                        size="240"
-                        v-model={state.color.hue}
-                        {...{onChange: handler.hueChange}}/>
-                    <div className="pl-color-panel-input-group">
-                        <PlInput ref={onRef.input}
-                                 size={StyleSize.mini}
-                                 modelValue={state.val}
-                                 width={props.enableAlpha ? 204 : 186}
-                                 {...{onChange: handler.inputChange}}
-                                 onBlur={handler.inputBlur}
-                                 onEnter={handler.inputEnter}/>
-                        <PlButtonGroup size={StyleSize.mini}>
-                            <PlButton icon="el-icon-close-bold" onClick={methods.reset}/>
-                            <PlButton icon="el-icon-check-bold" onClick={handler.confirm}/>
-                        </PlButtonGroup>
-                    </div>
-                </div>
-            )
-        }
-    },
-})
-
-export default PlColorPanel

package/src/packages/PlColorPicker/color-panel.scss

@@ -1,42 +0,0 @@
-@include theme {
-  .pl-color-panel {
-    display: inline-block;
-    font-size: 0;
-    padding: 8px 12px;
-
-    & > div:first-child {
-      white-space: nowrap;
-    }
-
-    .pl-color-hue-slider {
-      margin-top: 8px;
-      display: block;
-    }
-
-    .pl-color-alpha-slider {
-      margin-left: 8px;
-    }
-
-    .pl-color-panel-input-group {
-      margin-top: 8px;
-
-      .pl-input {
-
-        .pl-input-inner {
-          text-align: center;
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-          border-right: none;
-        }
-      }
-
-      .pl-button-group {
-        & > .pl-button:first-child {
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-          border-left: none;
-        }
-      }
-    }
-  }
-}

package/src/packages/PlColorPicker/color-picker.scss

@@ -1,35 +0,0 @@
-@include theme {
-
-  .pl-color-button {
-    border-radius: 2px;
-    height: 24px;
-    width: 24px;
-    border: solid 1px $ibc;
-    padding: 2px;
-    box-sizing: border-box;
-    display: inline-block;
-    cursor: pointer;
-
-    .pl-color-button-background {
-      background-size: 7px 7px;
-      border-radius: 2px;
-      box-sizing: border-box;
-      height: 100%;
-      width: 100%;
-
-      .pl-color-button-color {
-        height: 100%;
-        width: 100%;
-      }
-    }
-  }
-
-  .pl-color-picker {
-    @include sizeMixin(input) {
-      .pl-color-button {
-        height: $value/2;
-        width: $value/2;
-      }
-    }
-  }
-}