@ithinkdt/ui 4.0.0-38 → 4.0.0-400

package/src/components/DataCustom.jsx

@@ -1,187 +0,0 @@
-import { NButton, NCheckbox, NEllipsis, NFlex, NIcon, NPopover } from 'ithinkdt-ui'
-import { Sortable } from 'sortablejs/modular/sortable.core.esm.js'
-import { defineComponent, ref, toValue, watch, withDirectives } from 'vue'
-
-import { vTooltip } from '../directives/tooltip.jsx'
-import { useI18n } from '../use-i18n.js'
-
-import { ICustom, IDrag, ILeft, IRight } from './assets.jsx'
-
-const DataCustomItem = /* @__PURE__ */ defineComponent({
-    name: 'DataCustomRow',
-    props: {
-        label: [String, Function],
-        disabled: Boolean,
-        hidden: Boolean,
-        showFixed: Boolean,
-        fixed: [Boolean, String],
-    },
-    emits: ['update-hidden', 'update-fixed'],
-    setup(props, { emit }) {
-        return () => {
-            return (
-                <NFlex align="center" wrap={false} size="small">
-                    <NButton type="primary" text class="icon-drag">
-                        <NIcon size="18">
-                            <IDrag />
-                        </NIcon>
-                    </NButton>
-                    <NCheckbox
-                        checked={!props.hidden}
-                        disabled={props.disabled}
-                        onUpdateChecked={v => emit('update-hidden', !v)}
-                    />
-                    <NEllipsis style="flex: 1 1 auto">{toValue(props.label)}</NEllipsis>
-                    {
-                        props.showFixed
-                            ? [
-                                    <NButton
-                                        text
-                                        type={props.fixed === 'left' ? 'primary' : undefined}
-                                        onClick={() => emit('update-fixed', props.fixed === 'left' ? false : 'left')}
-                                    >
-                                        <NIcon>
-                                            <ILeft />
-                                        </NIcon>
-                                    </NButton>,
-                                    <NButton
-                                        text
-                                        type={props.fixed === 'right' ? 'primary' : undefined}
-                                        onClick={() => emit('update-fixed', props.fixed === 'right' ? false : 'right')}
-                                    >
-                                        <NIcon>
-                                            <IRight />
-                                        </NIcon>
-                                    </NButton>,
-                                ]
-                            : undefined
-                    }
-                </NFlex>
-            )
-        }
-    },
-})
-
-export const DataCustom = /* @__PURE__ */ defineComponent({
-    name: 'DataCustom',
-    props: {
-        data: {
-            type: Array,
-            required: true,
-        },
-        keyField: {
-            type: String,
-            default: 'key',
-        },
-        labelField: {
-            type: String,
-            default: 'label',
-        },
-        fixedField: {
-            type: String,
-            default: 'fixed',
-        },
-        hiddenField: {
-            type: String,
-            default: 'hidden',
-        },
-        showFixed: {
-            type: Boolean,
-            default: true,
-        },
-        disabledField: {
-            type: String,
-            default: 'disabled',
-        },
-        visiblityField: {
-            type: String,
-            default: 'visiblity',
-        },
-        tooltip: [String, Object],
-        size: {
-            type: Number,
-            default: 20,
-        },
-        type: {
-            type: String,
-        },
-    },
-    emits: {
-        custom: () => true,
-    },
-    setup(props, { emit }) {
-        const { t } = useI18n()
-
-        function emitCols(col, field, value) {
-            emit('custom', {
-                key: col[props.keyField],
-                [field]: value,
-            })
-        }
-
-        const ulRef = ref()
-
-        watch(ulRef, (inst) => {
-            if (!inst.$el) return
-            Sortable.create(inst.$el, {
-                animation: 150,
-                ghostClass: 'ghost',
-                handle: '.icon-drag',
-                filter: '.disabled',
-                onEnd(e) {
-                    const orders = props.data.map(item => item[props.keyField])
-                    const [curr] = orders.splice(e.oldIndex, 1)
-                    orders.splice(e.newIndex, 0, curr)
-                    emit('custom', orders)
-                },
-            })
-        })
-
-        return () => (
-            <NPopover
-                trigger="click"
-                scrollable
-                placement="left-start"
-                displayDirective="show"
-                style="max-height: 400px; width: 240px"
-            >
-                {{
-                    trigger: () =>
-                        withDirectives(
-                            <NButton text type={props.type}>
-                                <NIcon size={props.size}>
-                                    <ICustom />
-                                </NIcon>
-                            </NButton>,
-                            [[vTooltip, props.tooltip ?? t('common.page.custom.tooltip')]],
-                        ),
-                    default: () => (
-                        <NFlex vertical>
-                            <NFlex justify="space-between">
-                                <div style="font-weight: bold">{props.tooltip ?? t('common.page.custom.tooltip') }</div>
-                                <NButton text type="primary" size="small" onClick={() => emit('custom', true)}>
-                                    { t('common.page.custom.reset') }
-                                </NButton>
-                            </NFlex>
-                            <NFlex ref={ulRef} vertical>
-                                {props.data
-                                    .filter(item => item[props.visiblityField] !== false)
-                                    .map(item => (
-                                        <DataCustomItem
-                                            key={item[props.keyField]}
-                                            label={item[props.labelField]}
-                                            hidden={item[props.hiddenField]}
-                                            fixed={item[props.fixedField]}
-                                            showFixed={props.showFixed}
-                                            onUpdateHidden={v => emitCols(item, 'hidden', v)}
-                                            onUpdateFixed={v => emitCols(item, 'fixed', v)}
-                                        />
-                                    ))}
-                            </NFlex>
-                        </NFlex>
-                    ),
-                }}
-            </NPopover>
-        )
-    },
-})

package/src/components/DataFilter.jsx

@@ -1,119 +0,0 @@
-import { NButton, NFlex, formProps } from 'ithinkdt-ui'
-import { defineComponent, reactive, ref } from 'vue'
-
-import { pickProps } from '@ithinkdt/common/object'
-
-import { useI18n } from '../use-i18n.js'
-
-import { DataCustom } from './DataCustom.jsx'
-import { DataForm } from './DataForm.jsx'
-import { IDown, IUp } from './assets.jsx'
-
-export const DataFilter = /* @__PURE__ */ defineComponent({
-    name: 'DataFilter',
-    props: {
-        grid: {
-            type: Object,
-            default: () => ({}),
-        },
-        ...pickProps(formProps, 'disabled', 'model'),
-        labelWidth: { type: [String, Number], default: '5em' },
-        labelPlacement: { type: String, default: 'left' },
-        items: { type: Array, required: true },
-        loading: { type: Boolean, required: false, default: false },
-        filterOnReset: { type: Boolean, required: false, default: true },
-        filterText: { type: String, default: undefined },
-        resetText: { type: String, default: undefined },
-        customizable: { type: Boolean, required: false, default: true },
-        collapsible: { type: Boolean, required: false, default: true },
-        defaultCollapsed: { type: Boolean, required: false, default: true },
-    },
-    emits: ['filter', 'reset', 'custom', 'collapse'],
-    setup(props, { expose, emit }) {
-        const { t } = useI18n()
-
-        const onSubmit = (e) => {
-            emit('filter', props.model, e)
-        }
-        const onReset = (e) => {
-            emit('reset', e)
-            if (props.filterOnReset) {
-                emit('filter', props.model, e)
-            }
-        }
-        const collapsed = ref(props.defaultCollapsed)
-        const collapse = (collapsedValue) => {
-            collapsed.value = collapsedValue
-        }
-
-        expose({
-            collapse,
-        })
-
-        const action = reactive({
-            span: 6,
-            suffix: true,
-        })
-
-        return () => {
-            const { filterOnReset, filterText, resetText, customizable, defaultCollapsed, collapsible, grid, ...formProps } = props
-
-            return (
-                <DataForm
-                    grid={
-                        {
-                            cols: '12 768:18 1280:24 1536:30',
-                            yGap: 20,
-                            xGap: 8,
-                            ...grid,
-                            collapsed: collapsed.value,
-                        }
-                    }
-                    {...formProps}
-                    showFeedback={false}
-                    showAction={action}
-                    onSubmit={onSubmit}
-                    onReset={onReset}
-                >
-                    {{
-                        action: ({ cols, spans }) => {
-                            action.suffix = cols < (spans + action.span)
-
-                            return (
-                                <NFlex justify={action.suffix ? 'end' : 'start'} align="center">
-                                    {action.suffix ? undefined : <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>}
-                                    <NButton attrType="submit" type="primary" disabled={props.disabled} loading={props.loading}>
-                                        {filterText || t('common.page.filter.submitText') }
-                                    </NButton>
-                                    <NButton attrType="reset" disabled={props.disabled || props.loading}>
-                                        {resetText || t('common.page.form.resetText') }
-                                    </NButton>
-                                    {
-                                        customizable
-                                            ? <DataCustom keyField="name" showFixed={false} data={formProps.items} onCustom={e => emit('custom', e)} size={18} type="primary" />
-                                            : undefined
-                                    }
-                                    {
-                                        collapsible && action.suffix
-                                            ? (
-                                                    <NButton
-                                                        text
-                                                        type="primary"
-                                                        iconPlacement="right"
-                                                        renderIcon={collapsed.value ? IDown : IUp}
-                                                        onClick={() => collapse(!collapsed.value)}
-                                                    >
-                                                        {collapsed.value ? t('common.page.filter.expand') : t('common.page.filter.collapse') }
-                                                    </NButton>
-                                                )
-                                            : undefined
-                                    }
-                                </NFlex>
-                            )
-                        },
-                    }}
-                </DataForm>
-            )
-        }
-    },
-})

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>
-            )
-        }
-    },
-})