@ithinkdt/ui 4.0.0-10 → 4.0.0-11

package/src/components/DataForm.jsx

@@ -0,0 +1,264 @@
+import { debouncedWatch, useCurrentElement, useElementSize } 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())
+        debouncedWatch([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

@@ -0,0 +1,121 @@
+import { NButton, NIcon, NInput } from 'ithinkdt-ui'
+import { defineComponent, toRef, toValue, 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: [String, Object, Function, Number, Boolean],
+        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

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

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