@ithinkdt/ui 4.0.0-30 → 4.0.0-31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ithinkdt/ui",
-  "version": "4.0.0-30",
+  "version": "4.0.0-31",
   "type": "module",
   "license": "MIT",
   "description": "iThinkDT UI",
@@ -88,7 +88,7 @@
     "vite": "npm:rolldown-vite@^7.1.19",
     "vue": "^3.5.22",
     "vue-router": "^4.6.3",
-    "@ithinkdt/page": "^4.0.0-30"
+    "@ithinkdt/page": "^4.0.0-31"
   },
   "scripts": {
     "release": "pnpm publish --no-git-checks"

package/src/components/DataTable.jsx

@@ -1,12 +1,12 @@
 import { toReactive, unrefElement, until } from '@vueuse/core'
-import { NButton, NDataTable, NFlex, NIcon, NPerformantEllipsis, NTooltip } from 'ithinkdt-ui'
+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 { useClsPrefix } from '../use-style.js'
+import useStyle, { c, cB, cE, useClsPrefix } from '../use-style.js'
 
 import { IHelp } from './assets.jsx'
 
@@ -124,13 +124,20 @@ export const DataTable = /* @__PURE__ */ defineComponent({
         selectedKeys: {
             type: Array,
         },
+        highlight: {
+            type: [Boolean, String, Number, Object],
+            default: true,
+        },
+        rowClassName: dataTableProps.rowClassName,
+        rowProps: dataTableProps.rowProps,
     },
-    emits: ['sort', 'select', 'custom'],
+    emits: ['sort', 'select', 'custom', 'highlight'],
     setup(props, { slots, emit, expose }) {
         const { keyField } = inject(PAGE_INJECTION)
 
         const clsPrefix = useClsPrefix()
-        const cls = `${clsPrefix.value}-data-table`
+        const cls = `${clsPrefix.value}-datatable`
+        useStyle('-datatable', style, clsPrefix)
 
         const tableRef = useTemplateRef('table-ref')
 
@@ -162,7 +169,7 @@ export const DataTable = /* @__PURE__ */ defineComponent({
                 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})`)
+                    const row = tableRef.value.$el.querySelector(`.${cls}__row-marker:nth-child(${index + 1})`)
                     tableRef.value.scrollTo({
                         top: row.offsetTop,
                         behavior: 'smooth',
@@ -181,10 +188,33 @@ export const DataTable = /* @__PURE__ */ defineComponent({
             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) => {
-                const p = props.rowClassName?.(row, i) || ''
-                return p + ` ${cls}-row-marker`
+                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)
+                    },
+                }
             }
         })
 
@@ -221,6 +251,7 @@ export const DataTable = /* @__PURE__ */ defineComponent({
                 ref="table-ref"
                 scrollX={width.value}
                 rowClassName={rowClassName.value}
+                rowProps={rowProps.value}
                 checkedRowKeys={props.selectedKeys}
                 onUpdateSorter={onUpdateSorter}
                 onUpdateCheckedRowKeys={onUpdateCheckedRowKeys}
@@ -232,6 +263,17 @@ export const DataTable = /* @__PURE__ */ defineComponent({
     },
 })
 
+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 }) {

package/src/components.d.ts

@@ -149,6 +149,7 @@ export type DataTableProps<Data extends {}, KeyField extends keyof Data>
         data?: Data[] | undefined
         keyField?: KeyField | undefined
         selectedKeys?: Data[KeyField][] | undefined
+        highlight?: boolean | Data[KeyField] | undefined
         sorter?: SortParams<Data> | undefined
         onSort?: MaybeArray<(param: SortParams<Data>) => void> | undefined
         onSelect?: MaybeArray<(param: NonNullable<Data[KeyField]>[]) => void> | undefined
@@ -157,6 +158,7 @@ export type DataTableProps<Data extends {}, KeyField extends keyof Data>
 export type DataTableEmits<Data extends {}, KeyField extends keyof Data> = {
     (e: 'sort', param: SortParams<Data>): void
     (e: 'select', param: Data[KeyField][]): void
+    (e: 'highlight', rowKey: Data[KeyField]): void
     (e: 'custom', params: { key: string, width: number }): void
 }
 

package/src/page.d.ts

@@ -7,39 +7,40 @@ import {
     SelectGroupOption, SelectOption, SelectProps, SelectSlots,
     UploadFileInfo, UploadProps,
 } from 'ithinkdt-ui'
-import { MaybeRef, VNode, VNodeProps } from 'vue'
+import { MaybeRef, VNode } from 'vue'
 
+import { PublicProps } from '@ithinkdt/common'
 import { DictItem, DictTypeKey } from '@ithinkdt/common/dict'
 import { PageOptions } from '@ithinkdt/page'
 
 import { CheckboxesProps, RadiosProps, UserDeptProps, UserGroupOption } from './components'
 
-type DeepMaybeRef<T extends {}> = {
+type ShallowMaybeRef<T extends {}> = {
     [Key in (keyof T)]: MaybeRef<T[Key]>
 }
 
 declare module '@ithinkdt/page' {
     interface FormComponentPresets {
         input: {
-            props?: DeepMaybeRef<Omit<InputProps, 'value' | 'onUpdate:value' | 'disabled'>> & VNodeProps
-            slots?: InputSlots
+            inputProps?: ShallowMaybeRef<Omit<InputProps, 'value' | 'onUpdate:value' | 'disabled'>> & PublicProps
+            inputSlots?: InputSlots
         }
         number: {
-            props?: DeepMaybeRef<Omit<InputNumberProps, 'value' | 'onUpdate:value' | 'disabled'>> & VNodeProps
-            slots?: InputNumberSlots
+            numberProps?: ShallowMaybeRef<Omit<InputNumberProps, 'value' | 'onUpdate:value' | 'disabled'>> & PublicProps
+            numberSlots?: InputNumberSlots
         }
         select: {
-            props?: DeepMaybeRef<Omit<SelectProps, 'options' | 'value' | 'onUpdate:value' | 'disabled'> & VNodeProps
+            selectProps?: ShallowMaybeRef<Omit<SelectProps, 'options' | 'value' | 'onUpdate:value' | 'disabled'> & PublicProps
             & {
                 dictType?: DictTypeKey | undefined
                 options?: DictItem[] | (SelectOption | SelectGroupOption)[] | undefined
             }>
-            slots?: SelectSlots
+            selectSlots?: SelectSlots
         }
 
         checkbox: {
-            props?: DeepMaybeRef<Omit<CheckboxProps, 'checked' | 'onUpdate:checked' | 'disabled'>> & VNodeProps
-            slots?: {
+            checkboxProps?: ShallowMaybeRef<Omit<CheckboxProps, 'checked' | 'onUpdate:checked' | 'disabled'>> & PublicProps
+            checkboxSlots?: {
                 default?: (() => VNode[]) | undefined
                 checked?: (() => VNode[]) | undefined
                 unchecked?: (() => VNode[]) | undefined
@@ -47,59 +48,59 @@ declare module '@ithinkdt/page' {
         }
 
         checkboxes: {
-            props?: DeepMaybeRef<Omit<CheckboxesProps, 'disabled'> & VNodeProps
+            checkboxesProps?: ShallowMaybeRef<Omit<CheckboxesProps, 'disabled'> & PublicProps
             & {
                 dictType?: DictTypeKey | undefined
                 options?: DictItem[] | undefined
             }>
-            slots?: { }
+            checkboxesSlots?: { }
         }
 
         radios: {
-            props?: DeepMaybeRef<Omit<RadiosProps, 'disabled'> & VNodeProps
+            radiosProps?: ShallowMaybeRef<Omit<RadiosProps, 'disabled'> & PublicProps
             & {
                 dictType?: DictTypeKey | undefined
                 options?: DictItem[] | undefined
             }>
-            slots?: { }
+            radiosSlots?: { }
         }
 
         datepicker: {
-            props?: DeepMaybeRef<Omit<DatePickerProps, 'value' | 'onUpdate:value' | 'disabled'>> & VNodeProps
-            slots?: DatePickerSlots
+            datepickerProps?: ShallowMaybeRef<Omit<DatePickerProps, 'value' | 'onUpdate:value' | 'disabled'>> & PublicProps
+            datepickerSlots?: DatePickerSlots
         }
 
         file: {
-            props?: DeepMaybeRef<{
+            fileProps?: ShallowMaybeRef<{
                 type?: 'file' | 'image' | undefined
                 multiple?: boolean | undefined
                 max?: number | undefined
                 accept?: string | undefined
                 maxSize?: number | undefined
                 onBeforeUpload?: UploadProps['onBeforeUpload']
-            } & VNodeProps>
-            slots?: {
+            } & PublicProps>
+            fileSlots?: {
                 default?: (() => VNode[]) | undefined
             }
         }
         upload: {
-            props?: DeepMaybeRef<{
+            uploadProps?: ShallowMaybeRef<{
                 type?: 'file' | 'image' | undefined
                 multiple?: boolean | undefined
                 max?: number | undefined
                 accept?: string | undefined
                 maxSize?: number | undefined
                 onBeforeUpload?: UploadProps['onBeforeUpload']
-            } & VNodeProps>
-            slots?: {
+            } & PublicProps>
+            uploadSlots?: {
                 default?: (() => VNode[]) | undefined
             }
         }
 
         user: {
-            props?: DeepMaybeRef<Omit<UserDeptProps<boolean>, 'modelValue' | 'onUpdate:modelValue' | 'disabled'
-            | 'users' | 'groups' | 'depts' | 'getUsersByGroup' | 'getUsersByDept'>> & VNodeProps
-            slots?: {}
+            uploadProps?: ShallowMaybeRef<Omit<UserDeptProps<boolean>, 'modelValue' | 'onUpdate:modelValue' | 'disabled'
+            | 'users' | 'groups' | 'depts' | 'getUsersByGroup' | 'getUsersByDept'>> & PublicProps
+            uploadSlots?: {}
         }
     }
 
@@ -143,9 +144,9 @@ declare module '@ithinkdt/page' {
     }
 
     type ModalOptionsKey = 'type' | keyof import('@ithinkdt/page').ModalOptions
-    interface ModalDrawerOptions extends DeepMaybeRef<Omit<DrawerContentProps, ModalOptionsKey>>, DeepMaybeRef<Omit<DrawerProps, ModalOptionsKey>> { }
+    interface ModalDrawerOptions extends ShallowMaybeRef<Omit<DrawerContentProps, ModalOptionsKey>>, ShallowMaybeRef<Omit<DrawerProps, ModalOptionsKey>> { }
 
-    interface ModalDialogOptions extends DeepMaybeRef<Omit<ModalOptions, ModalOptionsKey>> {}
+    interface ModalDialogOptions extends ShallowMaybeRef<Omit<ModalOptions, ModalOptionsKey>> {}
 }
 
 export declare function createPageFormHelper(options?: {