@ithinkdt/ui 4.0.0-10 → 4.0.0-11

package/src/components/DataTable.jsx

@@ -0,0 +1,243 @@
+import { toReactive, unrefElement, until } from '@vueuse/core'
+import { NButton, NDataTable, NFlex, NIcon, NTooltip } 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 { 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 (column.children?.length) {
+                column.children = _map(column.children, width.value)
+            } else {
+                if (column.hidden !== true) {
+                    column.width ??= 100
+                    width.value += Number(column.width)
+                }
+
+                const render0 = column.render ?? (v => v)
+                if (column.ellipsis !== false) {
+                    column.ellipsis = mergeProps(
+                        {
+                            expandTrigger: 'click',
+                            lineClamp: 1,
+                            tooltip: {
+                                style: {
+                                    maxWidth: '61.8vw',
+                                    wordBreak: 'break-all',
+                                },
+                            },
+                        },
+                        typeof column.ellipsis === 'boolean' ? {} : column.ellipsis,
+                    )
+                    if (column.ellipsisTooltip === true) {
+                        column.ellipsisTooltip ??= render0
+                    }
+                }
+
+                Object.assign(column, {
+                    resizable: column.resizable !== false,
+                    sorter: column.sortable,
+                    type: ['selection', 'expand'].includes(column.type) ? column.type : undefined,
+                    disabled: column.selectable ? model => column.selectable(model) === false : undefined,
+                    ellipsisComponent: 'performant-ellipsis',
+                })
+            }
+
+            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,
+        },
+    },
+    emits: {
+        sort: () => true,
+        select: () => true,
+    },
+    setup(props, { slots, emit, expose }) {
+        const { keyField } = inject(PAGE_INJECTION)
+
+        const clsPrefix = useClsPrefix()
+        const cls = `${clsPrefix.value}-data-table`
+
+        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 rowClassName = computed(() => {
+            return (row, i) => {
+                const p = props.rowClassName?.(row, i) || ''
+                return p + ` ${cls}-row-marker`
+            }
+        })
+
+        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)
+        }
+
+        return () => (
+            <NDataTable
+                class={cls}
+                data={props.data}
+                columns={columns.value}
+                rowKey={rowKey.value}
+                tableLayout="fixed"
+                ref="table-ref"
+                scrollX={width.value}
+                rowClassName={rowClassName.value}
+                checkedRowKeys={props.selectedKeys}
+                onUpdateSorter={onUpdateSorter}
+                onUpdateCheckedRowKeys={onUpdateCheckedRowKeys}
+            >
+                {slots}
+            </NDataTable>
+        )
+    },
+})
+
+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

@@ -0,0 +1,120 @@
+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',
+        },
+    },
+
+    setup(props) {
+        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)',
+                }
+            : {})
+        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}>
+                    {props.type === 'radio'
+                        ? (
+                                <NFlex size={props.vertical ? undefined : 'small'} vertical={props.vertical}>
+                                    {content}
+                                </NFlex>
+                            )
+                        : (
+                                content
+                            )}
+                </NRadioGroup>
+            )
+        }
+    },
+})