@ithinkdt/ui 4.0.0-10 → 4.0.0-12

package/src/page.jsx

@@ -0,0 +1,626 @@
+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,
+                        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,
+                        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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,58 @@
+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 }
+}