plain-design 0.0.97 → 1.0.0-beta.2

package/src/packages/$$contextmenu/index.ts

@@ -1,3 +0,0 @@
-import {$$contextmenu} from "../useContextmenu";
-
-export default $$contextmenu

package/src/packages/$$dialog/index.ts

@@ -1,3 +0,0 @@
-import {$$dialog} from "../useDialog";
-
-export default $$dialog

package/src/packages/$$file/index.tsx

@@ -1,209 +0,0 @@
-import {$$message} from "../$$message"
-import {defer} from "plain-utils/utils/defer";
-
-export type FileServiceSingleFile = File & { calcSize: number, data?: any }
-export type FileServiceValidator = (file: FileServiceSingleFile) => boolean | undefined
-
-export type FileServiceChooseFileConfig = {
-    multiple?: boolean,                 // 是否多选
-    accept?: string,                    // 选择的文件类型， input组件的accept属性值
-    validator?: FileServiceValidator,   // 自定义校验函数
-    max?: number,                       // 最大文件大小
-}
-
-export type FileServiceUploadErrorEvent = Error & {
-    status: number,
-    method: string,
-    url: string,
-    config: FileServiceUploadConfig,
-}
-
-export type FileServiceUploadConfig = {
-    action: string,                             // 上传地址
-    file: File | File[],                        // 上传的文件
-    filename: string,                           // 上传文件接收的文件名
-    data?: Record<string, string>,               // 上传的额外数据
-    headers?: Record<string, string>,           // 请求头
-    withCredentials?: boolean,                  // 是否带cookies凭证
-    onProgress?: (percent: number, e: ProgressEvent) => void,
-    onSuccess?: (data: string | Record<string, string>) => void,
-    onError?: (e: FileServiceUploadErrorEvent | ProgressEvent) => void,
-}
-
-export const FileServiceDefaultAccept = {
-    // image: 'image/gif, image/jpeg, image/png, image/jpg',
-    image: 'bmp,jpg,jpeg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp,avif'.split(',').map(i => `image/${i}`).join(', '),
-    excel: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-} as Record<string, string>
-
-export function createFileService() {
-
-    /**
-     * 选择文件
-     * @author  韦胜健
-     * @date    2021/1/1 17:03
-     */
-    const chooseFile = (config?: FileServiceChooseFileConfig) => {
-        config = config || {}
-        const input = getInput()
-
-        /*multiple*/
-        if (config.multiple) {
-            input.setAttribute('multiple', 'multiple')
-        } else {
-            input.removeAttribute('multiple')
-        }
-        /*accept*/
-        if (!!config.accept) {
-            const defaultInputAccept = FileServiceDefaultAccept[config.accept]
-            input.setAttribute('accept', defaultInputAccept || config.accept)
-        } else {
-            input.removeAttribute('accept')
-        }
-        const dfd = defer<FileServiceSingleFile | FileServiceSingleFile[]>()
-
-        if (!!input.__change) {
-            input.value = null as any
-            input.removeEventListener('change', input.__change)
-        }
-        input.__change = (e) => {
-            const targetFiles = (e as any).target.files as FileServiceSingleFile[]
-            const files = []
-            for (let i = 0; i < targetFiles.length; i++) {
-                const file = targetFiles[i];
-                file.calcSize = Number((file.size / (1024 * 1024)).toFixed(2))
-                if (!!config!.validator && !config!.validator(file)) return
-                if (!!config!.max && file.calcSize > config!.max) {
-                    return $$message.error(`[${file.name}]大小为${file.calcSize}MB，超过最大限制${config!.max}MB`, {time: 5000})
-                }
-                files.push(file)
-            }
-            dfd.resolve(config!.multiple ? files : files[0])
-        }
-        input.addEventListener('change', input.__change)
-        input.click()
-
-        return dfd.promise
-    }
-
-    /**
-     * 选择tupiuan
-     * @author  韦胜健
-     * @date    2021/1/1 17:03
-     */
-    const chooseImage = (multiple?: boolean) => {
-        const config: FileServiceChooseFileConfig = {accept: "image", multiple}
-        return chooseFile(config)
-    }
-
-    /**
-     * 读取文件为base64字符串
-     * @author  韦胜健
-     * @date    2021/1/1 17:04
-     */
-    const readAsDataURL = (file: File) => {
-        const dfd = defer<string | ArrayBuffer | null>()
-        let fr = new FileReader()
-        fr.onloadend = e => dfd.resolve(e.target!.result)
-        fr.onerror = () => dfd.reject()
-        fr.readAsDataURL(file)
-        return dfd.promise
-    }
-
-    /**
-     * 上传文件
-     * @author  韦胜健
-     * @date    2021/1/1 17:07
-     */
-    const upload = (uploadConfig: FileServiceUploadConfig) => {
-        const xhr = ('XMLHttpRequest' in window ? new XMLHttpRequest() : new (Window as any).ActiveXObject('Microsoft.XMLHTTP')) as XMLHttpRequest
-        xhr.open('post', uploadConfig.action, true)
-
-        if (!!xhr.upload) {
-            xhr.upload.addEventListener('progress', (e) => {
-                const percent = Number((e.loaded / e.total * 100).toFixed(2))
-                !!uploadConfig.onProgress && uploadConfig.onProgress(percent, e)
-            })
-        }
-
-        if (uploadConfig.withCredentials != null && 'withCredentials' in xhr) {
-            xhr.withCredentials = uploadConfig.withCredentials
-        }
-
-        if (!!uploadConfig.headers)
-            Object.entries(uploadConfig.headers)
-                .forEach(([key, value]) => xhr.setRequestHeader(key, value))
-
-        xhr.onerror = (e) => !!uploadConfig.onError && uploadConfig.onError(e)
-        xhr.onload = () => {
-            if (xhr.status < 200 || xhr.status > 300) {
-                !!uploadConfig.onError && uploadConfig.onError(getError(uploadConfig, xhr))
-            } else {
-                !!uploadConfig.onSuccess && uploadConfig.onSuccess(getResponseBody(xhr))
-            }
-        }
-        const formData = new FormData()
-        if (!!uploadConfig.data) Object.entries(uploadConfig.data).forEach(([key, value]) => formData.append(key, value))
-        if (Array.isArray(uploadConfig.file)) {
-            uploadConfig.file.forEach(f => formData.append(uploadConfig.filename, f))
-        } else {
-            formData.append(uploadConfig.filename, uploadConfig.file);
-        }
-        xhr.send(formData)
-        return xhr
-    }
-
-    return {
-        chooseFile,
-        chooseImage,
-        readAsDataURL,
-        upload,
-    }
-}
-
-const getInput = (() => {
-    let input: HTMLInputElement & { __change?: (e: Event) => void };
-    return () => {
-        if (!input) {
-            input = document.createElement('input')
-            input.setAttribute('type', 'file')
-            input.style.display = 'none'
-            document.body.appendChild(input)
-        }
-        return input
-    }
-})();
-
-function getError(config: FileServiceUploadConfig, xhr: XMLHttpRequest) {
-    let message: string
-    console.log(xhr)
-    if (!!xhr.response) {
-        message = xhr.response.error || xhr.response
-    } else if (!!xhr.responseText) {
-        message = xhr.responseText
-    } else {
-        message = `file to post ${config.action} ${xhr.status}`
-    }
-
-    const error = new Error(message) as FileServiceUploadErrorEvent
-    error.status = xhr.status
-    error.method = 'post'
-    error.url = config.action
-    error.config = config
-
-    return error
-}
-
-function getResponseBody(xhr: XMLHttpRequest) {
-    let result = xhr.responseText || xhr.response
-    if (!result) return result
-    try {
-        return JSON.parse(result)
-    } catch (e) {
-        return result
-    }
-}
-
-export const $$file = createFileService()
-
-export default $$file

package/src/packages/$$image/index.ts

@@ -1,3 +0,0 @@
-import {$$image} from "../useImage";
-
-export default $$image

package/src/packages/$$loading/index.ts

@@ -1,9 +0,0 @@
-import {$$loadingBar} from "../useLoading/bar";
-import {$$loadingMask} from "../useLoading/full";
-
-export const $$loading = {
-    bar: $$loadingBar,
-    full: $$loadingMask,
-}
-
-export default $$loading

package/src/packages/$$message/index.ts

@@ -1,6 +0,0 @@
-import {createServiceWithoutContext} from "../PlRoot/registryRootService";
-import useMessage from "../useMessage";
-
-export const $$message = createServiceWithoutContext(useMessage)
-
-export default $$message

package/src/packages/$$notice/index.tsx

@@ -1,6 +0,0 @@
-import {createServiceWithoutContext} from "../PlRoot/registryRootService";
-import {useNotice} from "../useNotice";
-
-export const $$notice = createServiceWithoutContext(useNotice)
-
-export default $$notice

package/src/packages/NativeInput/index.tsx

@@ -1,4 +0,0 @@
-import {fixInputCursor} from "plain-design-composition";
-import React from "react";
-
-export const NativeInput = fixInputCursor<React.FC<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>>('input' as any)

package/src/packages/NativeTextarea/index.tsx

@@ -1,4 +0,0 @@
-import React from "react";
-import {fixInputCursor} from "plain-design-composition";
-
-export const NativeTextarea = fixInputCursor<React.FC<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>>>('textarea' as any)

package/src/packages/PlAddress/index.tsx

@@ -1,119 +0,0 @@
-import {designComponent, reactive, useModel, watch, watchEffect} from "plain-design-composition";
-import React from "react";
-import {EditProps, useEdit} from "../../use/useEdit";
-import {StyleProps} from "../../use/useStyle";
-import useAddress from "../useAddress";
-import {iAddressData} from "../useAddress/useAddress.utils";
-import PlSelect from "../PlSelect";
-import PlSelectOption from "../PlSelectOption";
-
-
-/**
- * 判断在这一次js执行栈运行过程中，是否为O2Address触发的change动作
- * @author  韦胜健
- * @date    2021/7/13 16:35
- */
-let watchParentChange = false
-
-export const PlAddress = designComponent({
-    name: 'pl-address',
-    props: {
-        ...EditProps,
-        ...StyleProps,
-
-        modelValue: {type: String},                          // 绑定值，如果bindId为true，那么就是绑定id；
-        parentValue: {type: String},                    // 父绑定值，如果bindId为true，那么就是绑定id；
-
-        province: {type: Boolean, default: false},       // 是否为选择省份
-        city: {type: Boolean, default: false},          // 是否为选择城市
-        district: {type: Boolean, default: false},      // 是否为选择区县
-    },
-    emits: {
-        onUpdateModelValue: (val?: string | number) => true,
-    },
-    setup({props, event: {emit}}) {
-
-        const {$address} = useAddress()
-
-        const {editState, editComputed} = useEdit({
-            adjust: val => {
-                if (!props.province && !props.parentValue) {
-                    val.disabled = true
-                }
-            }
-        })
-        /*值双向绑定值*/
-        const valueModel = useModel(() => props.modelValue, emit.onUpdateModelValue)
-
-        const freezeState = {
-            // 如果parentValue发生变化，则重新加载options数据
-            parentValue: undefined as undefined | string | number,
-        }
-
-        const state = reactive({
-            options: [] as iAddressData[],
-        })
-
-        watchEffect(async () => {
-            const {parentValue} = props
-            /*如果父值，以及是否为国家都没有变化，则证明数据已经加载过，无需再加载*/
-            if (parentValue == freezeState.parentValue && !props.province) {return}
-            freezeState.parentValue = parentValue
-            state.options = []
-            editState.loading = true
-
-            if (props.province) {
-                state.options = await $address.getAddressByParentCode("0")
-            } else {
-                if (!!parentValue) {
-                    state.options = await $address.getAddressByParentCode(parentValue)
-                }
-            }
-            editState.loading = false
-        }, {flush: 'post'})
-
-        const handler = {
-            /**
-             * 当O2Select触发change之后，根据change之后的val更新nameModel
-             * @author  韦胜健
-             * @date    2021/7/13 16:30
-             */
-            onSelectChange: (val: string | undefined) => {
-                valueModel.value = val
-
-                /**
-                 * 某个O2Address触发change的时候，告诉其他的O2Address，检查一下parentValue有没有变化，变化了就重置（清空）绑定的name以及value
-                 * @author  韦胜健
-                 * @date    2021/7/13 16:31
-                 */
-                ;(watchParentChange = true) && (setTimeout(() => watchParentChange = false))
-            }
-        }
-
-        /**
-         * - 监听parentValue的变化，如果新值和旧值不相同（一般情况下肯定是不相同的，不然不会触发watch的动作）
-         * - 则清空绑定的name以及value
-         * - watchParentChange主要是用来判断，这个parentValue的变化是 Address change导致的，还是用户手动修改数据导致的，
-         * 因为只有Address change的情况下，watchParentChange才是true
-         * @author  韦胜健
-         * @date    2021/7/13 16:32
-         */
-        watch(() => props.parentValue, (newVal, oldVal) => {
-            if (newVal != oldVal && watchParentChange) {
-                valueModel.value = undefined
-            }
-        })
-
-        return () => (
-            <PlSelect
-                modelValue={editComputed.value.loading ? '加载中...' : valueModel.value}
-                onUpdateModelValue={val => handler.onSelectChange(val as string)}>
-                {state.options.map((addr) => (
-                    <PlSelectOption label={addr.name} val={addr.code} key={addr.code}/>
-                ))}
-            </PlSelect>
-        )
-    },
-})
-
-export default PlAddress

package/src/packages/PlAlert/alert.scss

@@ -1,137 +0,0 @@
-@include theme {
-  $icon-width-large: 56px;
-  $icon-width-normal: 32px;
-
-  .pl-alert {
-    position: relative;
-    border-radius: 2px;
-    padding: 8px 16px;
-
-    .pl-alert-label {
-      font-size: 13px;
-    }
-
-    .pl-alert-desc {
-      font-size: 12px;
-      margin-top: 4px;
-    }
-
-    &.pl-alert-has-icon {
-      padding-left: $icon-width-normal;
-
-      .pl-alert-icon {
-        font-size: 1.2em;
-        position: absolute;
-        width: $icon-width-normal;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-
-    &.pl-alert-has-close {
-      $close-width: 44px;
-      position: relative;
-      padding-right: $close-width;
-
-      .pl-alert-close {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: $close-width;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-      }
-    }
-
-    &.pl-alert-has-desc {
-      .pl-alert-label {
-        font-weight: 600;
-      }
-
-      .pl-alert-icon {
-        font-size: 28px;
-      }
-
-      &.pl-alert-align-left {
-        .pl-alert-label, .pl-alert-desc {
-          text-align: left
-        }
-      }
-
-      &.pl-alert-align-center {
-        .pl-alert-label, .pl-alert-desc {
-          text-align: center
-        }
-      }
-
-      &.pl-alert-align-right {
-        .pl-alert-label, .pl-alert-desc {
-          text-align: right
-        }
-      }
-    }
-
-    &:not(.pl-alert-has-desc) {
-      &.pl-alert-align-left {
-        text-align: left
-      }
-
-      &.pl-alert-align-center {
-        text-align: center
-      }
-
-      &.pl-alert-align-right {
-        text-align: right
-      }
-    }
-
-    &.pl-alert-has-icon {
-      &:not(.pl-alert-has-desc) {
-        .pl-alert-label {
-          display: inline-block;
-        }
-      }
-
-      &.pl-alert-has-desc {
-        padding-left: $icon-width-large;
-
-        .pl-alert-icon {
-          width: $icon-width-large;
-        }
-      }
-    }
-
-    /*---------------------------------------theme-------------------------------------------*/
-
-    &.pl-alert-theme-lite {
-      @include statusMixin(alert) {
-        background-color: rgba($value, 0.1);
-        color: $value;
-        .pl-alert-close {
-          &:hover {
-            background-color: rgba($value, 0.2);
-          }
-        }
-      }
-    }
-
-    &.pl-alert-theme-deep {
-      @include statusMixin(alert) {
-        background-color: $value;
-        color: white;
-        .pl-alert-close {
-          &:hover {
-            background-color: mix($value, black, 90%);
-          }
-        }
-      }
-    }
-  }
-}

package/src/packages/PlAlert/index.tsx

@@ -1,94 +0,0 @@
-import {computed, designComponent, PropType, reactive, useRefs} from "plain-design-composition";
-import {StyleProps, StyleStatus, useStyle} from "../../use/useStyle";
-import {STATUS} from "../../utils/constant";
-import {useClasses} from "plain-design-composition";
-import React from "react";
-import PlIcon from "../PlIcon";
-import './alert.scss'
-import PlCollapseTransition from "../PlCollapseTransition";
-
-export const PlAlert = designComponent({
-    name: 'pl-alert',
-    inheritAttrs: false,
-    inheritPropsType: HTMLDivElement,
-    props: {
-        ...StyleProps,
-
-        label: {type: String},                                      // 提示文本
-        align: {type: String, default: 'left'},                     // 文本对其方式
-        theme: {type: String, default: 'lite'},                     // 主题，lite轻色，deep深色
-        noClose: {type: Boolean},                                   // 禁用关闭
-        icon: {type: String as PropType<string | null | undefined>, default: undefined},     // 显示的图标
-    },
-    slots: ['desc', 'close', 'default'],
-    setup({props, slots, attrs}) {
-
-        const {refs, onRef} = useRefs({
-            el: HTMLDivElement,
-        })
-
-        const state = reactive({
-            isClosed: false,
-        })
-
-        const {styleComputed} = useStyle({status: StyleStatus.info})
-
-        const icon = computed(() => {
-            if (props.icon === null) {
-                return null
-            }
-            return props.icon || STATUS[styleComputed.value.status!].icon
-        })
-        const classes = useClasses(() => [
-            'pl-alert',
-            `pl-alert-status-${styleComputed.value.status}`,
-            `pl-alert-shape-${styleComputed.value.shape}`,
-            `pl-alert-theme-${props.theme}`,
-            `pl-alert-align-${props.align}`,
-            {
-                'pl-alert-has-icon': !!icon.value,
-                'pl-alert-has-desc': slots.desc.isExist(),
-                'pl-alert-has-close': !props.noClose,
-            }
-        ])
-
-        const handler = {
-            onClickClosed: () => {
-                state.isClosed = true
-            }
-        }
-
-        return {
-            refer: {
-                refs,
-            },
-            render: () => (
-                <PlCollapseTransition show={!state.isClosed}>
-                    <div className="pl-alert-wrapper" {...attrs} ref={onRef.el}>
-                        <div className={classes.value}>
-                            {!!icon.value && <div className="pl-alert-icon">
-                                <PlIcon icon={icon.value}/>
-                            </div>}
-                            {!props.noClose && <div className="pl-alert-close" onClick={handler.onClickClosed}>
-                                {slots.close(<PlIcon icon="el-icon-close"/>)}
-                            </div>}
-                            {(!!props.label || slots.default.isExist()) && (
-                                <div className="pl-alert-label">
-                                    {slots.default(props.label)}
-                                </div>
-                            )}
-                            {(slots.desc.isExist()) && (
-                                <div className="pl-alert-desc">
-                                    {slots.desc()}
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                </PlCollapseTransition>
-            )
-        }
-
-    },
-})
-
-export default PlAlert

package/src/packages/PlArrowStep/index.tsx

@@ -1,75 +0,0 @@
-import {computed, designComponent, getCurrentDesignInstance, useRefs} from "plain-design-composition";
-import {ArrowStepCollector} from "../PlArrowStepGroup";
-import {StepStatus, StepUtils} from "../PlStepGroup/step.utils";
-import {useClasses} from "plain-design-composition";
-import React from "react";
-import PlTriangle from "../PlTriangle";
-
-export const PlArrowStep = designComponent({
-    name: 'pl-arrow-step',
-    props: {
-        status: {type: String},
-        title: {type: String},
-        val: {type: String},
-        hideIndex: {type: Boolean},
-    },
-    inheritPropsType: HTMLDivElement,
-    slots: ['default'],
-    setup({props, slots}) {
-        const ctx = getCurrentDesignInstance()
-        const {refs, onRef} = useRefs({el: HTMLDivElement})
-        const stepGroup = ArrowStepCollector.child({sort: () => refs.el!})
-        /*---------------------------------------computer-------------------------------------------*/
-
-        const index = computed(() => {
-            return stepGroup.items.indexOf(ctx.proxy)
-        }) as { value: number }
-
-        const isLast = computed(() => {
-            return index.value === stepGroup.items.length - 1
-        })
-
-        const isFirst = computed(() => {
-            return index.value === 0
-        })
-
-        const currentStatus: { value: StepStatus | null } = computed(() => {
-            return StepUtils.getStepStatus({
-                currentIndex: stepGroup.currentIndex as any,
-                currentStatus: stepGroup.props.currentStatus as any
-            }, {
-                status: props.status as any,
-                index: index as any
-            })
-        })
-
-        const classes = useClasses(() => [
-            'pl-arrow-step',
-            `pl-arrow-step-status-${currentStatus.value}`,
-        ])
-
-        return {
-            refer: {
-                refs,
-                props,
-            },
-            render: () => (
-                index.value != null ? (
-                    <div className={classes.value} ref={onRef.el}>
-                        <div className="pl-arrow-step-content">
-                            {!props.hideIndex && <span className="pl-arrow-step-sequence">{index.value + 1}. &nbsp;</span>}
-                            <span>{slots.default() || props.title}</span>
-                        </div>
-                        {!isLast.value && <PlTriangle direction="right" size={null as any}/>}
-                        {!isFirst.value && <>
-                            <PlTriangle direction="bottom" half="start" size={null as any}/>
-                            <PlTriangle direction="top" half="start" size={null as any}/>
-                        </>}
-                    </div>
-                ) : <div/>
-            )
-        }
-    },
-})
-
-export default PlArrowStep