@ithinkdt/ui 4.0.0-37 → 4.0.0-40

package/src/components/DataTable.jsx

@@ -1,302 +0,0 @@
-import { toReactive, unrefElement, until } from '@vueuse/core'
-import { NButton, NDataTable, NFlex, NIcon, NPerformantEllipsis, NTooltip, dataTableProps } from 'ithinkdt-ui'
-import { Sortable } from 'sortablejs'
-import { computed, defineComponent, inject, mergeProps, nextTick, ref, shallowRef, toValue, useTemplateRef, watch, withDirectives } from 'vue'
-
-import { PAGE_INJECTION } from '@ithinkdt/page'
-
-import { vTooltip } from '../directives/index.js'
-import useStyle, { c, cB, cE, useClsPrefix } from '../use-style.js'
-
-import { IHelp } from './assets.jsx'
-
-function _map(columns, width) {
-    return (columns ?? [])
-        .map((col) => {
-            const column = {
-                csvTitle: col.exportTitle,
-                ...col,
-                title: () => {
-                    const title0 = toValue(col.title)
-                    const title = title0
-                        ? withDirectives(<span>{title0}</span>, [[vTooltip, () => toValue(col.title), undefined, { auto: true }]])
-                        : title0
-                    if (!col.tooltip) return title
-                    return (
-                        <NFlex size={3} wrap={false} inline style="max-width: 100%">
-                            {title}
-
-                            <NTooltip>
-                                {{
-                                    default: toValue(col.tooltip),
-                                    trigger: () => (
-                                        <NButton text style="font-size: 1.25em; opacity: 0.8">
-                                            <NIcon>
-                                                <IHelp />
-                                            </NIcon>
-                                        </NButton>
-                                    ),
-                                }}
-                            </NTooltip>
-                        </NFlex>
-                    )
-                },
-            }
-
-            if (col.children?.length) {
-                column.children = _map(col.children, width.value)
-            } else {
-                if (col.hidden !== true) {
-                    column.width ??= 100
-                    width.value += Number(column.width)
-                }
-
-                const render0 = col.render ?? (v => v)
-                if (col.ellipsis !== false) {
-                    column.ellipsis = false
-                    column.render = (...params) => {
-                        const vnode = render0(...params)
-                        return (
-                            <NPerformantEllipsis
-                                {...mergeProps(
-                                    {
-                                        expandTrigger: 'click',
-                                        lineClamp: 1,
-                                        tooltip: {
-                                            style: {
-                                                maxWidth: '61.8vw',
-                                                wordBreak: 'break-all',
-                                            },
-                                        },
-                                    },
-                                    typeof col.ellipsis === 'boolean' ? {} : col.ellipsis,
-                                )}
-                            >
-                                {
-                                    vnode
-                                }
-                            </NPerformantEllipsis>
-                        )
-                    }
-
-                    if (col.ellipsisTooltip === true) {
-                        column.ellipsisTooltip ??= render0
-                    }
-                }
-
-                Object.assign(column, {
-                    resizable: col.resizable !== false,
-                    sorter: col.sortable,
-                    type: ['selection', 'expand'].includes(col.type) ? col.type : undefined,
-                    disabled: col.selectable ? model => col.selectable(model) === false : undefined,
-                })
-            }
-
-            if (column.key === '$actions') {
-                column.cellProps ??= () => {
-                    return { style: { padding: '0 2px' } }
-                }
-            }
-
-            return column
-        })
-        .filter(it => it?.hidden !== true)
-}
-
-export const DataTable = /* @__PURE__ */ defineComponent({
-    name: 'DataTable',
-    props: {
-        data: {
-            type: Array,
-            default: () => [],
-        },
-        columns: {
-            type: Array,
-            default: () => [],
-        },
-        keyField: {
-            type: String,
-        },
-        sorter: {
-            type: Object,
-            default: () => ({}),
-        },
-        selectedKeys: {
-            type: Array,
-        },
-        highlight: {
-            type: [Boolean, String, Number, Object],
-            default: true,
-        },
-        rowClassName: dataTableProps.rowClassName,
-        rowProps: dataTableProps.rowProps,
-    },
-    emits: ['sort', 'select', 'custom', 'highlight'],
-    setup(props, { slots, emit, expose }) {
-        const { keyField } = inject(PAGE_INJECTION)
-
-        const clsPrefix = useClsPrefix()
-        const cls = `${clsPrefix.value}-datatable`
-        useStyle('-datatable', style, clsPrefix)
-
-        const tableRef = useTemplateRef('table-ref')
-
-        const handleSort = ({ sortField, sortOrder } = {}, oSort) => {
-            if (sortField == oSort?.sortField && sortOrder == oSort?.sortOrder) return
-            tableRef.value?.sort(sortField, sortOrder ? sortOrder + 'end' : false)
-        }
-
-        watch(() => ({ ...props.sorter }), handleSort, { deep: true })
-
-        const rowKey = computed(() => {
-            const keyField0 = props.keyField || keyField || 'key'
-            return row => row[keyField0]
-        })
-
-        const exposed = shallowRef({
-            cache: [],
-            scrollToView(...params) {
-                this.cache.push(params)
-            },
-        })
-        until(tableRef)
-            .changed()
-            .then(() => {
-                handleSort(props.sorter)
-
-                const cache = exposed.value.cache
-                exposed.value = tableRef.value
-                exposed.value.scrollToView = (key) => {
-                    const index = props.data.findIndex(row => rowKey.value(row) === key)
-                    if (index === -1) return
-                    const row = tableRef.value.$el.querySelector(`.${cls}__row-marker:nth-child(${index + 1})`)
-                    tableRef.value.scrollTo({
-                        top: row.offsetTop,
-                        behavior: 'smooth',
-                    })
-                }
-                for (const params of cache) exposed.value.scrollToView(...params)
-            })
-
-        expose(toReactive(exposed))
-
-        const width = ref(0)
-        const columns = shallowRef([])
-
-        watch(() => props.columns, () => {
-            width.value = 0
-            columns.value = _map(props.columns, width)
-        }, { immediate: true, deep: 1 })
-
-        const highlightKey = ref()
-        watch(() => props.highlight, (val) => {
-            highlightKey.value = typeof val === 'boolean' ? null : (val ?? null)
-        }, { immediate: true })
-        const rowClassName = computed(() => {
-            return (row, i) => {
-                return [
-                    props.rowClassName?.(row, i) || '',
-                    `${cls}__row-marker`,
-                    (highlightKey.value != null && rowKey.value(row) === highlightKey.value) ? `${cls}__row-highlight` : '',
-                ].join(' ')
-            }
-        })
-        const rowProps = computed(() => {
-            return (row, i) => {
-                const props2 = props.rowProps?.(row, i)
-                return {
-                    ...props2,
-                    onClick: (e) => {
-                        const key = rowKey.value(row)
-                        if (props.highlight === true) {
-                            highlightKey.value = key
-                        }
-                        emit('highlight', key)
-                        props2?.onClick?.(e)
-                    },
-                }
-            }
-        })
-
-        const onUpdateSorter = (e) => {
-            if (props.sorter) {
-                const { sortField, sortOrder } = props.sorter
-                if (e?.columnKey == sortField && (e?.order ? e.order === sortOrder + 'end' : !sortOrder)) return
-            }
-
-            emit('sort', {
-                sortField: e?.order ? e?.columnKey : undefined,
-                sortOrder: e?.order ? e.order.replace('end', '') : undefined,
-            })
-        }
-
-        const onUpdateCheckedRowKeys = (keys) => {
-            emit('select', keys)
-        }
-
-        const onColumnResize = (resizedWidth, limitedWidth, column) => {
-            emit('custom', {
-                key: column.key,
-                width: resizedWidth,
-            })
-        }
-
-        return () => (
-            <NDataTable
-                class={cls}
-                data={props.data}
-                columns={columns.value}
-                rowKey={rowKey.value}
-                tableLayout="fixed"
-                ref="table-ref"
-                scrollX={width.value}
-                rowClassName={rowClassName.value}
-                rowProps={rowProps.value}
-                checkedRowKeys={props.selectedKeys}
-                onUpdateSorter={onUpdateSorter}
-                onUpdateCheckedRowKeys={onUpdateCheckedRowKeys}
-                onUnstableColumnResize={onColumnResize}
-            >
-                {slots}
-            </NDataTable>
-        )
-    },
-})
-
-const style = /* @__PURE__ */ cB(
-    'datatable',
-    [
-        cE('row-highlight', [
-            c('& > td', {
-                backgroundColor: 'var(--n-tr-highlight-color, var(--n-merged-border-color)) !important',
-            }),
-        ]),
-    ],
-)
-
-export function useDataTableDrag(
-    tableRef,
-    { data, onSort, ...options }) {
-    watch([ref(data), tableRef], async ([data, inst]) => {
-        if (data.length === 0)
-            return
-
-        await nextTick()
-        const tableEl = unrefElement(inst)
-        const tbodyEl = tableEl?.querySelector('.n-data-table-base-table-body .n-data-table-tbody')
-
-        if (!tbodyEl) return
-
-        const sortable = Sortable.create(tbodyEl, {
-            animation: 150,
-            ...options,
-            onSort(evt) {
-                onSort({ from: evt.oldIndex, to: evt.newIndex })
-            },
-        })
-
-        return () => {
-            sortable.destroy()
-        }
-    }, { immediate: true })
-}

package/src/components/Radios.jsx

@@ -1,134 +0,0 @@
-import { NFlex, NRadio, NRadioButton, NRadioGroup, NTooltip } from 'ithinkdt-ui'
-import { computed, defineComponent } from 'vue'
-
-import { useI18n } from '../use-i18n.js'
-
-export const NRadios = defineComponent({
-    name: 'Radios',
-    props: {
-        options: {
-            type: Array,
-            default: () => [],
-        },
-        vertical: {
-            type: Boolean,
-            default: false,
-        },
-        type: {
-            type: String,
-            default: 'radio',
-        },
-        default: {
-            type: [Boolean, String, Object],
-            default: false,
-        },
-        padding: {
-            type: String,
-            default: undefined,
-        },
-        labelField: {
-            type: String,
-            default: 'label',
-        },
-        valueField: {
-            type: String,
-            default: 'value',
-        },
-        disabledField: {
-            type: String,
-            default: 'disabled',
-        },
-        modelValue: {
-            type: [String, Number, Boolean],
-            default: undefined,
-        },
-    },
-    emits: {
-        'update:modelValue': () => true,
-        'updateModelValue': () => true,
-    },
-
-    setup(props, { emit }) {
-        const { t } = useI18n()
-
-        const defaultLabel = computed(() => {
-            if (props.default === false) return ''
-            if (props.default === true) return t('common.all')
-            if (typeof props.default === 'string') return props.default
-            return props.default?.[props.labelField] ?? t('common.all')
-        })
-
-        const groupStyle = computed(() => props.type === 'button-primary'
-            ? {
-                    '--n-button-color-active': 'var(--color-primary)',
-                    '--n-button-text-color-active': 'var(--color-base)',
-                }
-            : {})
-
-        const emitValue = (v) => {
-            emit('update:modelValue', v)
-            emit('updateModelValue', v)
-        }
-
-        return () => {
-            const Comp = props.type === 'button' ? NRadioButton : NRadio
-
-            const content = (
-                <>
-                    {props.default
-                        ? (
-
-                                <Comp value={typeof props.default === 'object' ? props.default?.[props.valueField] : null}>
-                                    {defaultLabel.value}
-                                </Comp>
-                            )
-                        : undefined}
-                    {props.options?.map((op) => {
-                        const label
-                            = typeof op[props.labelField] === 'string' ? op[props.labelField] : op[props.labelField]?.()
-                        return (
-                            <Comp
-                                value={op[props.valueField]}
-                                disabled={op[props.disabledField]}
-                                style={
-                                    props.padding
-                                        ? {
-                                                paddingLeft: props.padding,
-                                                paddingRight: props.padding,
-                                            }
-                                        : {}
-                                }
-                            >
-                                {op.tip
-                                    ? (
-                                            <NTooltip>
-                                                {{
-                                                    default: () => op.tip,
-                                                    trigger: () => label,
-                                                }}
-                                            </NTooltip>
-                                        )
-                                    : (
-                                            label
-                                        )}
-                            </Comp>
-                        )
-                    })}
-                </>
-            )
-            return (
-                <NRadioGroup style={props.vertical ? { ...groupStyle.value, padding: '6px 0 0' } : groupStyle.value} value={props.modelValue} onUpdateValue={emitValue}>
-                    {props.type === 'radio'
-                        ? (
-                                <NFlex size={props.vertical ? undefined : 'small'} vertical={props.vertical}>
-                                    {content}
-                                </NFlex>
-                            )
-                        : (
-                                content
-                            )}
-                </NRadioGroup>
-            )
-        }
-    },
-})