@ithinkdt/ui 4.0.0-38 → 4.0.0-41

package/src/components/DataForm.jsx

@@ -1,264 +0,0 @@
-import { useCurrentElement, useElementSize, watchDebounced } from '@vueuse/core'
-import { NButton, NFlex, NForm, NFormItem, NGi, NGrid, NIcon, NText, NTooltip, formProps } from 'ithinkdt-ui'
-import { defineComponent, ref, toRaw, toValue } from 'vue'
-
-import { pickProps } from '@ithinkdt/common/object'
-
-import { useI18n } from '../use-i18n.js'
-
-import { ICheck, IHelp } from './assets.jsx'
-
-export const DataForm = /* @__PURE__ */ defineComponent({
-    name: 'DataForm',
-    props: {
-        grid: {
-            type: Object,
-            default: () => ({}),
-        },
-        ...pickProps(formProps, 'disabled', 'model', 'labelWidth', 'labelAlign', 'showFeedback', 'size'),
-        readonly: { type: Boolean, required: false, default: undefined },
-        items: { type: Array, required: true },
-        validation: { type: Object, default: () => ({}) },
-        loading: Boolean,
-        showColon: Boolean,
-        actionAlign: { type: String, default: 'start' },
-        showAction: { type: [Boolean, Object], default: undefined },
-        submitText: { type: [String, Number, Object], default: undefined },
-        resetText: { type: [String, Number, Object], default: undefined },
-        cancelText: { type: [String, Number, Object], default: undefined },
-        showSubmitBtn: { type: Boolean, required: false, default: true },
-        showResetBtn: { type: Boolean, required: false, default: true },
-        showCancelBtn: { type: Boolean, required: false, default: false },
-        submitDisabled: Boolean,
-        succeeded: Boolean,
-        successText: { type: [String, Number, Object], default: undefined },
-        tooltipPlacement: { type: String, default: 'bottom' },
-        requireMarkPlacement: { type: String, default: 'left' },
-        labelPlacement: { type: String, default: 'left' },
-    },
-    emits: ['submit', 'reset', 'cancel'],
-    setup(props, { emit, slots }) {
-        const { t } = useI18n()
-
-        const onSubmit = (e) => {
-            e?.preventDefault?.()
-            emit('submit', { ...toRaw(props.model) }, e)
-        }
-
-        const onReset = (e) => {
-            e?.preventDefault?.()
-            emit('reset')
-        }
-
-        const onCancel = (e) => {
-            e?.preventDefault?.()
-            emit('cancel')
-        }
-
-        const gridRef = ref()
-
-        const cols = ref()
-        const { width } = useElementSize(useCurrentElement())
-        watchDebounced([gridRef, width], () => {
-            cols.value = undefined
-            setTimeout(() => {
-                cols.value = gridRef.value?.responsiveCols || undefined
-            }, 30)
-        }, { immediate: true, debounce: 100 })
-
-        return () => {
-            const { items, loading, validation, showColon, showAction, actionAlign, submitText, submitDisabled, resetText, tooltipPlacement, showFeedback: _showFeedback,
-                labelWidth = '7.2em', labelAlign = props.labelPlacement === 'top' ? 'left' : 'right', grid, succeeded, successText = submitText, ...formProps } = props
-
-            const showFeedback = !props.readonly && _showFeedback !== false
-            return (
-                <NForm
-                    labelWidth={labelWidth}
-                    labelAlign={labelAlign}
-                    onReset={onReset}
-                    onSubmit={onSubmit}
-                    showFeedback={showFeedback}
-                    {...formProps}
-                >
-                    <NGrid
-                        ref={gridRef}
-                        itemResponsive
-                        {...grid}
-                        yGap={showFeedback ? 0 : (grid?.yGap ?? 24)}
-                    >
-                        {{ default: () => {
-                            let spans = 0
-                            return (
-                                <>
-                                    {
-                                        items.map(({
-                                            hidden, name, render, label, showColon, span = 6, rowSpan, offset = 0, tooltip, tooltipPlacement = props.tooltipPlacement,
-                                            validationStatus = validation[name]?.errors?.some(it => it !== undefined)
-                                                ? 'error'
-                                                : (validation[name]?.warnings?.some(it => it !== undefined)
-                                                        ? 'warnings'
-                                                        : (validation[name] ? 'success' : undefined)),
-                                            readonly = props.readonly,
-                                            showRequireMark = !readonly,
-                                            showTooltipWhenReadonly = false,
-                                            ...itemProps
-                                        }) => {
-                                            if (hidden) return
-                                            spans += span
-                                            let content
-                                            if (name[0] === '$') {
-                                                content = render({})
-                                            } else {
-                                                content = (
-                                                    <NFormItem
-                                                        path={name}
-                                                        validationStatus={validationStatus}
-                                                        showRequireMark={itemProps.required && showRequireMark}
-                                                        {...itemProps}
-                                                    >
-                                                        {{
-                                                            label: () => (
-                                                                <NText depth={props.readonly ? 3 : 2} style="display: inline-flex; align-items: flex-start; gap: 1px">
-                                                                    <span>{toValue(label)}</span>
-                                                                    {tooltipPlacement === 'icon'
-                                                                        ? (
-                                                                                <NTooltip>
-                                                                                    {{
-                                                                                        default: () => toValue(tooltip),
-                                                                                        trigger: () => (
-                                                                                            <NButton
-                                                                                                text
-                                                                                                style="font-size: 1.25em; opacity: 0.8"
-                                                                                            >
-                                                                                                <NIcon>
-                                                                                                    <IHelp />
-                                                                                                </NIcon>
-                                                                                            </NButton>
-                                                                                        ),
-                                                                                    }}
-                                                                                </NTooltip>
-                                                                            )
-                                                                        : undefined}
-                                                                    {props.showColon && showColon !== false
-                                                                        ? <span style="place-self: center">:</span>
-                                                                        : undefined}
-                                                                </NText>
-                                                            ),
-                                                            default: () => {
-                                                                const vnode = (
-                                                                    <div style="width: 100%; font-size: calc(1rem - 2px); min-height: 32px; display: flex; align-items: center">
-                                                                        {render({ disabled: props.disabled, size: props.size, readonly: props.readonly })}
-                                                                    </div>
-                                                                )
-                                                                const showTooltip = tooltip && tooltipPlacement === 'bottom' && (!props.readonly || showTooltipWhenReadonly)
-
-                                                                return showTooltip
-                                                                    ? (
-                                                                            <div
-                                                                                style="width: 100%; display: flex; flex-direction: column"
-                                                                            >
-                                                                                {vnode}
-                                                                                <NText depth={3} style="font-size: calc(1rem - 3px); margin-top: 6px">{toValue(tooltip)}</NText>
-                                                                            </div>
-                                                                        )
-                                                                    : vnode
-                                                            },
-                                                            feedback: () => {
-                                                                return validation[name]?.errors[0] ?? validation[name]?.warnings[0]
-                                                            },
-                                                        }}
-                                                    </NFormItem>
-                                                )
-                                            }
-
-                                            if (props.grid === false) {
-                                                return content
-                                            }
-
-                                            return (
-                                                <NGi
-                                                    key={name}
-                                                    offset={offset}
-                                                    span={span}
-                                                    style={rowSpan ? { gridRowEnd: `span ${rowSpan}` } : undefined}
-                                                >
-                                                    {content}
-                                                </NGi>
-                                            )
-                                        })
-                                    }
-
-                                    { showAction === false || (props.readonly === true && !slots.action)
-                                        ? undefined
-                                        : (
-                                                <NGi
-                                                    key="action"
-                                                    span={Number.MAX_SAFE_INTEGER}
-                                                    {
-                                                        ...(typeof props.showAction === 'object' ? props.showAction : {})
-                                                    }
-                                                >
-                                                    {{
-                                                        default: ({ overflow }) => {
-                                                            if (slots.action) return slots.action({ cols: cols.value, spans, overflow })
-
-                                                            return (
-                                                                <NFormItem
-                                                                    label={props.actionAlign === 'start' ? ' ' : undefined}
-                                                                    showLabel={props.labelPlacement !== 'top'}
-                                                                    style="padding-top: 16px"
-                                                                >
-                                                                    <NFlex justify={props.actionAlign} align="center">
-                                                                        {
-                                                                            props.showSubmitBtn === false
-                                                                                ? undefined
-                                                                                : (
-                                                                                        <NButton attrType="submit" type={succeeded ? 'success' : 'primary'} disabled={succeeded || props.disabled || props.submitDisabled || loading} loading={loading}>
-                                                                                            {{
-                                                                                                default: () => (succeeded ? successText : submitText) || t('common.page.form.submitText'),
-                                                                                                icon: () => succeeded ? <NIcon><ICheck /></NIcon> : undefined,
-                                                                                            }}
-                                                                                        </NButton>
-                                                                                    )
-                                                                        }
-                                                                        {
-                                                                            props.showResetBtn === false
-                                                                                ? undefined
-                                                                                : (
-                                                                                        <NButton
-                                                                                            attrType="reset"
-                                                                                            disabled={props.disabled || loading}
-                                                                                            type={props.showCancelBtn ? 'primary' : 'default'}
-                                                                                            secondary={props.showCancelBtn}
-                                                                                        >
-                                                                                            {props.resetText || t('common.page.form.resetText') }
-                                                                                        </NButton>
-                                                                                    )
-                                                                        }
-                                                                        {
-                                                                            props.showCancelBtn === false
-                                                                                ? undefined
-                                                                                : (
-                                                                                        <NButton attrType="button" disabled={props.disabled || loading} onClick={onCancel}>
-                                                                                            {props.cancelText || t('common.page.form.cancelText') }
-                                                                                        </NButton>
-                                                                                    )
-                                                                        }
-                                                                    </NFlex>
-                                                                </NFormItem>
-                                                            )
-                                                        },
-                                                    }}
-                                                </NGi>
-                                            )}
-
-                                </>
-                            )
-                        } }}
-
-                    </NGrid>
-                </NForm>
-            )
-        }
-    },
-})

package/src/components/DataLocaleInput.jsx

@@ -1,121 +0,0 @@
-import { NButton, NIcon, NInput } from 'ithinkdt-ui'
-import { computed, defineComponent, ref, toRef, toValue, unref, watch } from 'vue'
-
-import { useFormModal } from '@ithinkdt/page'
-
-import { useI18n } from '../use-i18n.js'
-
-import { ILanguage } from './assets.jsx'
-
-export function useLocaleEdit(title, onSubmit, defaultRows = 1) {
-    const { t } = useI18n()
-
-    const readonly = ref(false)
-    let supports = []
-    const { open, reinit } = useFormModal({
-        title,
-        showColon: true,
-        submitText: t('common.confirm.defaultOk'),
-        items: ({ it }) => {
-            return supports.map((s) => {
-                return it(s.value, s.label, 'input', {
-                    span: 24,
-                    required: s.required,
-                    inputProps: {
-                        readonly,
-                        clearable: true,
-                        type: 'textarea',
-                        showCount: true,
-                        autosize: {
-                            minRows: unref(defaultRows),
-                            maxRows: Math.max(unref(defaultRows), 5),
-                        },
-                    },
-                })
-            })
-        },
-        onSubmit,
-    })
-
-    return {
-        open: (data, readonly0 = false) => {
-            readonly.value = readonly0
-            return open(data)
-        },
-        setSupports: (supports0) => {
-            supports = supports0
-            reinit()
-        },
-    }
-}
-
-export const DataLocaleInput = /* @__PURE__ */ defineComponent({
-    name: 'DataLocaleInput',
-    props: {
-        label: { type: [String, Function, Number, Boolean, Object] },
-        modelValue: Object,
-        supports: { type: Array, default: () => [] },
-        disabled: { type: Boolean, default: undefined },
-        defaultLang: { type: String, default: 'zh-CN' },
-        showLang: { type: String, default: undefined },
-        defaultRows: { type: Number, default: 1 },
-    },
-    emits: ['update:modelValue', 'updateModelValue'],
-    setup(props, { emit }) {
-        const onUpdateValue = (value) => {
-            value = {
-                ...props.modelValue,
-                [props.showLang ?? props.defaultLang]: value,
-            }
-            emit('update:modelValue', value)
-            emit('updateModelValue', value)
-        }
-
-        const { open, setSupports } = useLocaleEdit(
-            computed(() => toValue(props.label)),
-            (data) => {
-                emit('update:modelValue', data)
-                emit('updateModelValue', data)
-            },
-            toRef(props, 'defaultRows'),
-        )
-
-        watch(() => props.supports, setSupports, { immediate: true })
-
-        const slots = {
-            suffix: () => (
-                <NButton
-                    quaternary
-                    onClick={() => open(props.modelValue, props.disabled)}
-                    style="--n-padding: 0 8px"
-                >
-                    <NIcon size="20" depth="3">
-                        <ILanguage />
-                    </NIcon>
-                </NButton>
-            ),
-        }
-        const themeOverrides = {
-            '--n-padding-right': '0',
-        }
-
-        return () => {
-            return (
-                <NInput
-                    value={
-                        props.modelValue?.[props.showLang ?? props.defaultLang]
-                        ?? props.modelValue?.[props.defaultLang]
-                    }
-                    onUpdateValue={onUpdateValue}
-                    disabled={props.disabled}
-                    clearable
-                    style={themeOverrides}
-                    type={props.defaultRows > 1 ? 'textarea' : 'text'}
-                    rows={props.defaultRows}
-                >
-                    {slots}
-                </NInput>
-            )
-        }
-    },
-})

package/src/components/DataPagination.jsx

@@ -1,62 +0,0 @@
-import { NPagination } from 'ithinkdt-ui'
-import { defineComponent } from 'vue'
-
-import { useI18n } from '../use-i18n.js'
-
-export const DataPagination = /* @__PURE__ */ defineComponent({
-    name: 'DataPagination',
-    props: {
-        total: {
-            type: Number,
-            default: 0,
-        },
-        currentPage: {
-            type: Number,
-        },
-        pageSize: {
-            type: Number,
-        },
-        page: {
-            type: Object,
-        },
-        pageSizes: {
-            type: Array,
-            default: () => [10, 20, 30, 50],
-        },
-    },
-    emits: {
-        change: () => true,
-    },
-    setup(props, { emit }) {
-        const { t } = useI18n()
-
-        const onUpdatePage = page => emit('change', {
-            pageSize: props.pageSize ?? props.page?.pageSize ?? 0,
-            currentPage: page,
-        })
-        const onUpdatePageSize = pageSize => emit('change', {
-            pageSize,
-            currentPage: props.currentPage ?? props.page?.currentPage ?? 0,
-        })
-        return () => {
-            return (
-                <NPagination
-                    page={props.currentPage ?? props.page?.currentPage}
-                    itemCount={props.total}
-                    pageSize={props.pageSize ?? props.page?.pageSize}
-                    onUpdatePage={onUpdatePage}
-                    onUpdatePageSize={onUpdatePageSize}
-                    pageSizes={props.pageSizes}
-                    showQuickJumper
-                    showSizePicker
-                    style="justify-content: flex-end"
-                >
-                    {{
-                        prefix: () => t('common.page.pagination.prefix', { total: props.total }),
-                        suffix: () => t('common.page.pagination.suffix'),
-                    }}
-                </NPagination>
-            )
-        }
-    },
-})

package/src/components/DataSelection.jsx

@@ -1,57 +0,0 @@
-import { NButton, NFlex } from 'ithinkdt-ui'
-import { defineComponent } from 'vue'
-
-import { useI18n } from '../use-i18n.js'
-
-export const DataSelection = /* @__PURE__ */ defineComponent({
-    name: 'DataSelection',
-    props: {
-        modelValue: {
-            type: String,
-            required: true,
-        },
-        count: {
-            type: Number,
-            default: 0,
-        },
-    },
-    emits: {
-        'update:modelValue': () => true,
-        'clear': () => true,
-    },
-    setup(props, { emit }) {
-        const { t } = useI18n()
-
-        return () => {
-            if (props.modelValue !== 'selection' && props.count === 0) return <div />
-
-            return (
-                <div>
-                    <NFlex align="center" wrap-item={false}>
-                        <span>
-                            {t('common.page.selection.countText', { count: props.count }) }
-                        </span>
-                        <NButton
-                            text
-                            type="primary"
-                            onClick={() => {
-                                emit('update:modelValue', props.modelValue === 'all' ? 'selection' : 'all')
-                            }}
-                        >
-                            {props.modelValue === 'all' ? t('common.page.selection.view') : t('common.page.selection.back') }
-                        </NButton>
-                        <NButton
-                            text
-                            onClick={() => {
-                                emit('clear')
-                                emit('update:modelValue', 'all')
-                            }}
-                        >
-                            {t('common.page.selection.clear') }
-                        </NButton>
-                    </NFlex>
-                </div>
-            )
-        }
-    },
-})