@ithinkdt/ui 4.0.0-19 → 4.0.0-200

package/src/page.jsx

@@ -1,628 +0,0 @@
-import { format } from 'date-fns'
-import {
-    NButton, NCheckbox, NColorPicker, NDatePicker, NDrawer, NDrawerContent, NFlex, NInput,
-    NInputNumber, NModal, NScrollbar, NSelect, NText, NUpload,
-    useMessage,
-} from 'ithinkdt-ui'
-import { defineComponent, h, mergeProps, unref } from 'vue'
-
-import { useDict, useDictMap } from '@ithinkdt/common/dict'
-
-import { DataForm, DtDeptRender, DtUserDept, DtUserRender, NCheckboxes, NRadios } from './components'
-import { useI18n } from './use-i18n.js'
-
-const mapProps = (props) => {
-    return Object.fromEntries(Object.entries(props || {}).map(([prop, value]) => [prop, unref(value)]))
-}
-export function createPageFormHelper({
-    getUserGroups, getUsersByGroup, getUsersByDept, getUsersByUsername, uploadFile,
-}) {
-    const SimpleUpload = defineComponent({
-        name: 'SimpleUpload',
-        props: {
-            type: { type: String, default: 'file' }, // file | image
-            multiple: { type: Boolean, default: false },
-            max: { type: Number, default: undefined },
-            accept: { type: String, default: undefined },
-            maxSize: { type: Number, default: undefined }, // MB
-            disabled: { type: Boolean, default: undefined },
-            fileList: { type: Array, default: () => [] },
-            onUpdateFileList: { type: [Array, Function] },
-        },
-        setup(props, { slots }) {
-            const { t } = useI18n()
-
-            const message = useMessage()
-            const customRequest = computed(() => props.customRequest || (
-                async ({ file, onProgress, onFinish, onError }) => {
-                    uploadFile(file, percent => onProgress({ percent }))
-                        .then((id) => {
-                            file.file.fileId = id
-                            onFinish()
-                        }).catch((error) => {
-                            message.success(error.message)
-                            onError(error)
-                        })
-                }
-            ))
-            return () => {
-                const { type, onUpdateFileList, ...props0 } = props
-                return (
-                    <NUpload
-                        {...props0}
-                        onFinish={({ file, event }) => {
-                            props0.onFinish?.({ file, event })
-                            return {
-                                ...file,
-                                id: file.file.fileId,
-                            }
-                        }}
-                        customRequest={customRequest.value}
-                        listType={type === 'image' ? 'image-card' : 'text'}
-                        accept={props0.accept ?? type === 'image' ? 'image/*' : undefined}
-                        onUpdate:fileList={onUpdateFileList}
-                    >
-                        {{
-                            default: () => <NButton disabled={props.disabled}>{t('common.page.form.selectFileText')}</NButton>,
-                            ...slots,
-                        }}
-                    </NUpload>
-                )
-            }
-        },
-    })
-
-    return {
-        input: () => (
-            { slots, props },
-            { modelValue, 'onUpdate:modelValue': onUpdateValue, required, readonly, ...params },
-        ) => {
-            if (readonly) return <NText depth={2} style="line-height: 1.25">{modelValue ?? ''}</NText>
-
-            props = mapProps(props)
-            return h(NInput, {
-                'clearable': true,
-                ...props,
-                ...params,
-                'value': modelValue,
-                'onUpdate:value': onUpdateValue,
-            }, slots)
-        },
-        number: () => (
-            { slots, props },
-            { modelValue, 'onUpdate:modelValue': onUpdateValue, required, readonly, ...params },
-        ) => {
-            if (readonly) return <NText depth={2} style="line-height: 1.25">{modelValue ?? ''}</NText>
-            props = mapProps(props)
-            return h(NInputNumber, {
-                'clearable': true,
-                ...props,
-                ...params,
-                'value': modelValue,
-                'onUpdate:value': onUpdateValue,
-            }, slots)
-        },
-        select: () => {
-            let dictType0, options0
-            return (
-                { slots, props: props0 },
-                { modelValue, 'onUpdate:modelValue': onUpdateValue, required, readonly, ...params },
-            ) => {
-                const { dictType, options, ...props } = mapProps(props0)
-                if (options) {
-                    options0 = options
-                } else {
-                    if (dictType0 !== dictType) {
-                        dictType0 = dictType
-                        if (!options0 && dictType0) {
-                            options0 = useDict(dictType0)
-                        }
-                    }
-                }
-                if (readonly) {
-                    if (props.multiple) {
-                        const items = modelValue ? options0?.filter(item => modelValue.includes(item[props.valueField || 'value'])) : []
-                        return (
-                            <NText depth={2} style="line-height: 1.25">
-                                {
-                                    items.map((it, i, arr) => {
-                                        const vn = props.renderLabel ? props.renderLabel(it) ?? '' : it[props.labelField || 'label'] ?? ''
-                                        return (
-                                            <span key={it[props.valueField || 'value']}>
-                                                {vn}
-                                                {i < arr.length - 1 ? ', ' : ''}
-                                            </span>
-                                        )
-                                    })
-                                }
-                            </NText>
-                        )
-                    } else {
-                        const it = options0?.find(item => item[props.valueField || 'value'] === modelValue)
-                        return <NText depth={2} style="line-height: 1.25">{it ? props.renderLabel ? props.renderLabel(it) ?? '' : it[props.labelField || 'label'] ?? '' : ''}</NText>
-                    }
-                }
-
-                return h(NSelect, {
-                    'clearable': true,
-                    'loading': options0?.loading,
-                    ...props,
-                    'options': unref(options0),
-                    ...params,
-                    'value': modelValue,
-                    'onUpdate:value': onUpdateValue,
-                }, slots)
-            }
-        },
-        checkbox: () => (
-            { slots, props },
-            { modelValue, 'onUpdate:modelValue': onUpdateValue, required, readonly, ...params },
-        ) => {
-            props = mapProps(props)
-            if (readonly) {
-                let content
-                if (modelValue === (props.checkedValue ?? true)) {
-                    content = slots?.checked
-                        ? slots.checked()
-                        : <NCheckbox checked />
-                } else {
-                    content = slots?.unchecked ? slots.unchecked() : <NCheckbox disabled />
-                }
-                return <NText depth={2} style="line-height: 1.25">{content}</NText>
-            }
-
-            return h(NCheckbox, {
-                ...props,
-                ...params,
-                'checked': modelValue,
-                'onUpdate:checked': onUpdateValue,
-            }, slots)
-        },
-        checkboxes: () => {
-            let dictType0, options0
-            return (
-                { props: props0 },
-                { modelValue, required, readonly, ...params },
-            ) => {
-                const { dictType, options, ...props } = mapProps(props0)
-                if (options) {
-                    options0 = options
-                } else {
-                    if (dictType0 !== dictType) {
-                        dictType0 = dictType
-                        if (!options0 && dictType0) {
-                            options0 = useDict(dictType0)
-                        }
-                    }
-                }
-                if (readonly) {
-                    const items = options0?.filter(item => modelValue.includes(item[props.valueField ?? 'value']))
-                    return (
-                        <NText depth={2} style="line-height: 2.4">
-                            {
-                                items.map((it, i, arr) => {
-                                    const vn = it[props.labelField ?? 'label'] ?? ''
-                                    return (
-                                        <span key={it[props.valueField ?? 'value']}>
-                                            {vn}
-                                            {i < arr.length - 1 ? ', ' : ''}
-                                        </span>
-                                    )
-                                })
-                            }
-                        </NText>
-                    )
-                }
-
-                return h(NCheckboxes,
-                    {
-                        ...props,
-                        ...params,
-                        options: options0,
-                        modelValue,
-                    },
-                )
-            }
-        },
-        radios: () => {
-            let dictType0, options0
-            return (
-                { props: props0 },
-                { modelValue, required, readonly, ...params },
-            ) => {
-                const { dictType, options, ...props } = mapProps(props0)
-                if (options) {
-                    options0 = options
-                } else {
-                    if (dictType0 !== dictType) {
-                        dictType0 = dictType
-                        if (!options0 && dictType0) {
-                            options0 = useDict(dictType0)
-                        }
-                    }
-                }
-
-                if (readonly) {
-                    const it = options0?.find(item => item[props.valueField ?? 'value'] === modelValue)
-                    return <NText depth={2} style="line-height: 1.25">{it?.[props.labelField ?? 'label'] ?? ''}</NText>
-                }
-
-                return h(
-                    NRadios,
-                    {
-                        ...props,
-                        ...params,
-                        options: options0,
-                        modelValue,
-                    },
-                )
-            }
-        },
-        datepicker: () => (
-            { slots, props },
-            { modelValue, 'onUpdate:modelValue': onUpdateValue, required, readonly, ...params },
-        ) => {
-            const { type = 'date', format: formatter = type.startsWith('datetime') ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd', ...props2 } = mapProps(props)
-            if (readonly) {
-                if (type.endsWith('range')) {
-                    return (
-                        <NText depth={2} style="line-height: 1.25">
-                            {modelValue
-                                ? `${modelValue[0] ? format(modelValue[0], formatter) : ''
-                                } ~ ${modelValue[1] ? format(modelValue[1], formatter) : ''}`
-                                : ''}
-                        </NText>
-                    )
-                }
-                return (
-                    <NText depth={2} style="line-height: 1.25">
-                        {modelValue ? format(modelValue, formatter) : ''}
-                    </NText>
-                )
-            }
-
-            return h(NDatePicker, {
-                'clearable': true,
-                ...props2,
-                ...params,
-                type,
-                'format': formatter,
-                'value': modelValue,
-                'onUpdate:value': onUpdateValue,
-            }, slots)
-        },
-        file: () => {
-            return (
-                { slots, props },
-                { modelValue, 'onUpdate:modelValue': onUpdateValue, required, readonly, ...params },
-            ) => {
-                props = mapProps(props)
-                if (readonly) {
-                    if (modelValue.length === 0) return
-                    return (
-                        <NFlex gap="8" wrap>
-                            {modelValue.map(it => (
-                                <a
-                                    key={it.id}
-                                    href={it.url}
-                                    target="_blank"
-                                    rel="noreferrer"
-                                    style="max-width: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block"
-                                >
-                                    {it.name}
-                                </a>
-                            ))}
-                        </NFlex>
-                    )
-                }
-                return h(SimpleUpload, {
-                    ...props,
-                    ...params,
-                    fileList: modelValue,
-                    onUpdateFileList: onUpdateValue,
-                }, slots)
-            }
-        },
-        user: () => {
-            let users, groups, depts
-            return (
-                { slots, props: props0 },
-                { modelValue, 'onUpdate:modelValue': onUpdateValue, required, readonly, ...params },
-            ) => {
-                const props = mapProps(props0)
-                if (!users) {
-                    users = shallowRef([])
-                    getUsersByUsername().then((res) => {
-                        users.value = res
-                    })
-                    getUserGroups().then((res) => {
-                        groups.value = res
-                    })
-                    getDeptsByCode().then((res) => {
-                        depts.value = res
-                    })
-                }
-                if (readonly) {
-                    return <DtUserRender value={modelValue} multiple={props.multiple} getUsersByUsername={getUsersByUsername} />
-                }
-
-                return h(DtUserDept, {
-                    'type': 'user',
-                    'users': users.value,
-                    'depts': depts.value,
-                    'groups': groups.value,
-                    getUsersByDept,
-                    getUsersByGroup,
-                    ...props,
-                    ...params,
-                    modelValue,
-                    'onUpdate:modelValue': onUpdateValue,
-                }, slots)
-            }
-        },
-    }
-}
-
-export function createPageTableHelper({ getDeptsByCode, getUsersByUsername, getFileInfos, previewFileUrl }) {
-    const getFormatter = (defaultFormatter) => {
-        return () => (value, record, index, params) => {
-            if (value === undefined || value === null) return
-            return format(value, params.formatter ?? defaultFormatter)
-        }
-    }
-
-    const IDot = (props = {}) => (
-        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" {...props}>
-            {/* Icon from Carbon by IBM - undefined */}
-            <circle cx="16" cy="16" r="8" fill="currentColor" />
-        </svg>
-    )
-
-    return {
-        date: getFormatter('yyyy-MM-dd'),
-        datetime: getFormatter('yyyy-MM-dd HH:mm:ss'),
-        dict: () => {
-            let dictType0, options0, optionMap
-            return (value, record, index, params) => {
-                if (value === undefined || value === null) return
-                const { dictType, options, multiple, statusMap } = mapProps(params)
-                if (options) {
-                    if (options0 !== options) {
-                        options0 = options
-                        optionMap = new Map(options.map(op => [op[params.valueField || 'value'], op]))
-                    }
-                } else {
-                    if (dictType0 !== dictType) {
-                        dictType0 = dictType
-                        if (!optionMap && dictType0) {
-                            optionMap = useDictMap(dictType0)
-                        }
-                    }
-                }
-                if (!multiple) {
-                    value = value.toString()
-                    if (statusMap && value in statusMap) {
-                        let status = statusMap[value] ?? 'default'
-                        if (['primary', 'success', 'warning', 'danger'].includes(status)) {
-                            status = `var(--color-${status})`
-                        }
-                        return (
-                            <span style="position: relative; padding-left: 1.25em">
-                                <IDot style={`color: ${status}; position: absolute;left: 0; top: 1.5px`} />
-                                <span>{optionMap.get(value?.toString())?.[params.labelField || 'label'] ?? ''}</span>
-                            </span>
-                        )
-                    }
-                    return optionMap.get(value)?.[params.labelField || 'label'] ?? ''
-                }
-                return value?.map(it => optionMap.get(it.toString())?.[params.labelField || 'label']) ?? ''
-            }
-        },
-        number: () => {
-            return (value, record, index, params) => {
-                if (value === undefined || value === null) return
-                if (params.percent) {
-                    value = Number(value) * 100
-                }
-                switch ('number') {
-                    case typeof params.fixed: {
-                        value = value.toFixed(params.fixed)
-                        break
-                    }
-                    case typeof params.round: {
-                        value = value.toFixed(params.round).replace(/0+$/, '')
-                        break
-                    }
-                    case typeof params.precision: {
-                        value = value.toPrecision(params.precision)
-                        break
-                    }
-                }
-                return params?.separator ? Number(value).toLocaleString() : value
-            }
-        },
-        email: () => {
-            return (value) => {
-                return <a href={`mailto:${value}`}>{value}</a>
-            }
-        },
-        url: () => {
-            return (value) => {
-                return <a href={value}>{value}</a>
-            }
-        },
-        color: () => {
-            return (value) => {
-                return <NColorPicker value={value} disabled size="small" />
-            }
-        },
-        image: () => {
-            return (value, record, index, params) => {
-                if (!value) return
-                const urls = (Array.isArray(value) ? value : (params?.multiple ? value.split(',') : [value]))
-                    .map(id => previewFileUrl(id))
-                return (
-                    <NFlex gap="8" wrap>
-                        {urls.map(url => (
-                            <img key={url} src={url} style="max-height: 32px; max-width: 100px; object-fit: contain" />
-                        ))}
-                    </NFlex>
-                )
-            }
-        },
-        file: () => {
-            const key = nanoid()
-            return (value, record, index, params) => {
-                if (!value) return
-                record.__file_urls ??= {}
-                if (!record.__file_urls[key]) {
-                    getFileInfos(Array.isArray(value) ? value : (params?.multiple ? value.split(',') : [value]))
-                        .then((infos) => {
-                            record.__file_urls[key] = infos
-                        })
-                }
-                const infos = record.__file_urls[key] || []
-
-                return (
-                    <NFlex gap="8" wrap>
-                        {infos.map(it => (
-                            <a
-                                key={it.id}
-                                href={it.url}
-                                target="_blank"
-                                rel="noreferrer"
-                                style="max-width: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block"
-                            >
-                                {it.name}
-                            </a>
-                        ))}
-                    </NFlex>
-                )
-            }
-        },
-        dept: () => {
-            return (value, record, index, params) => {
-                if (!value) return
-                return <DtDeptRender value={value} multiple={params?.multiple} getDeptsByCode={getDeptsByCode} />
-            }
-        },
-        user: () => {
-            return (value, record, index, params) => {
-                if (!value) return
-                return <DtUserRender value={value} multiple={params?.multiple} getUsersByUsername={getUsersByUsername} />
-            }
-        },
-    }
-}
-
-export function createFormHelper() {
-    return () => ({ items, model, handleSubmit, reset, validation, readonly, inModal, showColon }) => {
-        return (
-            <DataForm
-                readonly={readonly}
-                model={model}
-                items={items}
-                validation={validation}
-                showColon={unref(showColon) ?? true}
-                showAction={false}
-                onSubmit={handleSubmit}
-                onRest={reset}
-                style={inModal ? 'padding-right: 2rem; padding-top: 1rem' : undefined}
-            />
-        )
-    }
-}
-
-export function createModalHelper() {
-    const formatLength = (length) => {
-        if (typeof length === 'number') {
-            return `${length}px`
-        }
-        return length
-    }
-    const contentStyle0 = {
-        maxHeight: 'calc(100vh - 130px)',
-        display: 'flex',
-        flexDirection: 'column',
-    }
-
-    const segmented = { content: true }
-    return () => ({
-        type = 'dialog', visible, title, content, footer, placement, resizable, draggable, closeOnEsc, closable,
-        showMask, maskClosable, width, height, style, onClose, onCancel, onConfirm, onAfterClose, onAfterOpen,
-        confirmText, confirmDisabled, confirmLoading, cancelText, cancelDisabled, cancelLoading, nativeScrollbar, ...options
-    }) => {
-        const footer0 = footer
-            ? () => footer
-            : footer === null
-                ? () => null
-                : () => (
-                        <NFlex justify="end" gap="16">
-                            {cancelText === null ? undefined : <NButton onClick={onCancel} disabled={cancelDisabled} loading={cancelLoading} style="min-width: 60px">{cancelText}</NButton>}
-                            {confirmText === null ? undefined : <NButton type="primary" onClick={onConfirm} disabled={confirmDisabled} loading={confirmLoading} style="min-width: 60px">{confirmText}</NButton>}
-                        </NFlex>
-                    )
-        if (type === 'dialog') {
-            const { style: style0 } = mergeProps(
-                { style: { width: formatLength(width ?? 520), height: formatLength(height) } },
-                { style },
-            )
-            return (
-                <NModal
-                    show={visible}
-                    preset="card"
-                    title={() => title}
-                    maskClosable={maskClosable ?? false}
-                    closeOnEsc={closeOnEsc}
-                    closable={closable}
-                    onClose={onClose}
-                    segmented={segmented}
-                    size="small"
-                    onAfterEnter={onAfterOpen}
-                    onAfterLeave={onAfterClose}
-                    onUpdateShow={onClose}
-                    draggable={draggable ?? true}
-                    style={style0}
-                    contentStyle={contentStyle0}
-                    {...options}
-                >
-                    {{
-                        default: () => (
-                            <NScrollbar abstract style="display: flex; flex-direction: column">
-                                {content}
-                            </NScrollbar>
-                        ),
-                        action: footer0,
-                    }}
-                </NModal>
-            )
-        }
-
-        return (
-            <NDrawer
-                show={visible}
-                trapFocus={false}
-                closeOnEsc={closeOnEsc}
-                showMask={showMask}
-                maskClosable={maskClosable}
-                resizable={resizable}
-                placement={placement}
-                width={width ?? 440}
-                height={height}
-                onUpdateShow={onClose}
-                onAfterEnter={onAfterOpen}
-                onAfterLeave={onAfterClose}
-                style={style}
-                {...options}
-            >
-                <NDrawerContent closable={closable} nativeScrollbar={nativeScrollbar ?? false}>
-                    {{
-                        default: () => content,
-                        header: () => title,
-                        footer: footer0,
-                    }}
-                </NDrawerContent>
-            </NDrawer>
-        )
-    }
-}

package/src/use-i18n.js

@@ -1,8 +0,0 @@
-import { inject } from 'vue'
-
-export const UI_I18N_INJECTION = '__UI_I18N__'
-
-export function useI18n() {
-    const i18n = inject(UI_I18N_INJECTION)
-    return i18n.value()
-}

package/src/use-style.js

@@ -1,58 +0,0 @@
-import { useMergedClsPrefix } from 'ithinkdt-ui/es/_mixins/use-config'
-import _useStyle from 'ithinkdt-ui/es/_mixins/use-style'
-
-export { c, cB, cE, cM } from 'ithinkdt-ui/es/_utils/cssr/index'
-
-export { useMergedClsPrefix as useClsPrefix }
-
-export default function useStyle(mountId, style, clsPrefix, styleIsolate) {
-    clsPrefix ??= useMergedClsPrefix()
-    _useStyle(mountId, style, clsPrefix, styleIsolate)
-    return clsPrefix
-}
-
-export const fullWidth = {
-    width: '100%',
-}
-
-export const fullHeight = {
-    height: '100%',
-}
-
-export const fullWH = {
-    ...fullWidth,
-    ...fullHeight,
-}
-
-export const flex = {
-    display: 'flex',
-}
-
-export const flexDirCol = {
-    ...flex,
-    flexDirection: 'column',
-}
-
-export const flexAlignCenter = {
-    ...flex,
-    alignItems: 'center',
-}
-
-export const flexJustifyCenter = {
-    ...flex,
-    justifyContent: 'center',
-}
-
-export const flexJustifySB = {
-    ...flex,
-    justifyContent: 'space-between',
-}
-
-export const flexCenter = {
-    ...flexAlignCenter,
-    ...flexJustifyCenter,
-}
-
-export const flexGap = (gap) => {
-    return { ...flex, gap }
-}