Replace toRaw with deepToRaw to avoid some potential errors.

Author: gudaoxuri

docs/TableDemo.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import type { Ref } from 'vue';
-import { onMounted, ref, toRaw } from 'vue';
-import { IwEvents, IwProps, IwUtils } from '../src';
-import type { EditableDataResp } from '../src/props';
+import type { Ref } from 'vue'
+import { onMounted, ref } from 'vue'
+import { IwEvents, IwProps, IwUtils } from '../src'
+import type { EditableDataResp } from '../src/props'
+import { deepToRaw } from '../src/utils/vueHelper'
 
 const selectedRecordPks: Ref<any[]> = ref([])
 
@@ -69,7 +70,7 @@ function attachDict(data: { [columnName: string]: any }[]) {
 
 const events: IwProps.TableEventProps = {
   loadData: async (quickSearchContent?: string, filter?: IwProps.FilterDataProps, sort?: IwProps.SortDataProps, group?: IwProps.GroupDataProps, agg?: IwProps.AggDataProps, hideSubData?: boolean, byGroupValue?: any, slice?: IwProps.DataQuerySliceReq, returnColumnNames?: string[], _returnOnlyAgg?: boolean): Promise<IwProps.DataResp | IwProps.DataGroupResp[]> => {
-    let data: { [columnName: string]: any }[] = toRaw(DATA)
+    let data: { [columnName: string]: any }[] = deepToRaw(DATA)
     if (quickSearchContent) {
       data = data.filter((d) => {
         return d.name.includes(quickSearchContent)

src/components/eventbus.ts

@@ -1,5 +1,4 @@
 import type { Ref } from 'vue'
-import { toRaw } from 'vue'
 import locales from '../locales'
 
 import type { DataGroupResp, DataQuerySliceReq, DataResp, DictItemsResp, EditableDataResp, LayoutModifyProps, SimpleLayoutProps, TableStyleModifyProps } from '../props'
@@ -45,7 +44,7 @@ export async function watch() {
 export async function loadData(byGroupValue?: any, returnOnlyAgg?: boolean, layoutId?: string) {
   const layout = layoutId ? layoutsConf.find(layout => layout.id === layoutId)! : layoutsConf.find(layout => layout.id === currentLayoutId.value)!
 
-  const rawLayout = toRaw(layout)
+  const rawLayout = deepToRaw(layout)
 
   const showColumns = rawLayout.columns.filter(column => !column.hide).map(column => column.name).slice()
   if (tableConf.parentPkColumnName && rawLayout.columns.findIndex(column => column.name === tableConf.parentPkColumnName) === -1) {
@@ -153,7 +152,7 @@ export async function loadData(byGroupValue?: any, returnOnlyAgg?: boolean, layo
  * @param newRecords 要新建的数据 / Records to be created
  */
 export async function newData(newRecords: { [columnName: string]: any }[]) {
-  newRecords = toRaw(newRecords)
+  newRecords = deepToRaw(newRecords)
   const layout = layoutsConf.find(layout => layout.id === currentLayoutId.value)!
 
   if (!events.newData) {
@@ -182,7 +181,7 @@ export async function newData(newRecords: { [columnName: string]: any }[]) {
  * @param targetRecordPks 要复制的数据主键 / Data primary keys to be copied
  */
 export async function copyData(targetRecordPks: any[]) {
-  targetRecordPks = toRaw(targetRecordPks)
+  targetRecordPks = deepToRaw(targetRecordPks)
   const layout = layoutsConf.find(layout => layout.id === currentLayoutId.value)!
 
   if (!events.copyData) {
@@ -211,7 +210,7 @@ export async function copyData(targetRecordPks: any[]) {
  * @param changedRecords 要修改的数据 / Data to be modified
  */
 export async function modifyData(changedRecords: { [columnName: string]: any }[]) {
-  changedRecords = toRaw(changedRecords)
+  changedRecords = deepToRaw(changedRecords)
 
   const layout = layoutsConf.find(layout => layout.id === currentLayoutId.value)!
 
@@ -243,7 +242,7 @@ export async function modifyData(changedRecords: { [columnName: string]: any }[]
  * @param deletedRecordPks 要删除的数据主键 / Data primary keys to be deleted
  */
 export async function deleteData(deletedRecordPks: any[]) {
-  deletedRecordPks = toRaw(deletedRecordPks)
+  deletedRecordPks = deepToRaw(deletedRecordPks)
 
   const layout = layoutsConf.find(layout => layout.id === currentLayoutId.value)!
 
@@ -273,7 +272,7 @@ export async function deleteData(deletedRecordPks: any[]) {
  * @param checkRecordPks 要检查的数据主键 / Data primary keys to be checked
  */
 export async function loadEditableData(checkRecordPks: any[]): Promise<EditableDataResp> {
-  checkRecordPks = toRaw(checkRecordPks)
+  checkRecordPks = deepToRaw(checkRecordPks)
 
   const layout = layoutsConf.find(layout => layout.id === currentLayoutId.value)!
 
@@ -299,7 +298,7 @@ export async function loadEditableData(checkRecordPks: any[]): Promise<EditableD
  * @param selectedRecordPks 选择的数据主键 / Selected data primary keys
  */
 export async function selectData(selectedRecordPks: any[]) {
-  selectedRecordPks = toRaw(selectedRecordPks)
+  selectedRecordPks = deepToRaw(selectedRecordPks)
 
   const layout = layoutsConf.find(layout => layout.id === currentLayoutId.value)!
 
@@ -354,7 +353,7 @@ export async function clickCell(clickedRecordPk: any, clickedColumnName: string)
  * @returns 字典项列表 / Dictionary item list
  */
 export async function loadCellDictItems(dictName: string, filterValue?: any, slice?: DataQuerySliceReq): Promise<DictItemsResp> {
-  slice = toRaw(slice)
+  slice = deepToRaw(slice)
 
   const layout = layoutsConf.find(layout => layout.id === currentLayoutId.value)!
 
@@ -381,8 +380,8 @@ export async function loadCellDictItems(dictName: string, filterValue?: any, sli
  * @returns 字典项列表 / Dictionary item list
  */
 export async function loadCellDictItemsWithMultiConds(conds: { [columnName: string]: any[] }, slice?: DataQuerySliceReq): Promise<{ [columnName: string]: DictItemsResp }> {
-  conds = toRaw(conds)
-  slice = toRaw(slice)
+  conds = deepToRaw(conds)
+  slice = deepToRaw(slice)
 
   const layout = layoutsConf.find(layout => layout.id === currentLayoutId.value)!
 
@@ -407,7 +406,7 @@ export async function loadCellDictItemsWithMultiConds(conds: { [columnName: stri
  * @param changedStyleProps 修改的样式属性 / Modified style properties
  */
 export async function modifyStyles(changedStyleProps: TableStyleModifyProps) {
-  changedStyleProps = toRaw(changedStyleProps)
+  changedStyleProps = deepToRaw(changedStyleProps)
 
   const layout = layoutsConf.find(layout => layout.id === currentLayoutId.value)!
 
@@ -525,9 +524,10 @@ export async function modifyLayout(changedLayoutProps: LayoutModifyProps, byGrou
 
   changedLayoutProps.slice !== undefined && (layout.slice = changedLayoutProps.slice)
   changedLayoutProps.showSelectColumn !== undefined && (layout.showSelectColumn = changedLayoutProps.showSelectColumn)
+  changedLayoutProps.actionColumn !== undefined && (layout.actionColumn = changedLayoutProps.actionColumn)
+
   changedLayoutProps.subDataShowKind !== undefined && (layout.subDataShowKind = changedLayoutProps.subDataShowKind)
 
-  changedLayoutProps.actionColumn !== undefined && (layout.actionColumn = changedLayoutProps.actionColumn)
   changedLayoutProps.gantt !== undefined && (layout.gantt = changedLayoutProps.gantt)
   changedLayoutProps.filter !== undefined && (layout.filter = changedLayoutProps.filter)
   changedLayoutProps.group !== undefined && (layout.group = changedLayoutProps.group)

src/components/function/BasicSetting.vue

@@ -15,9 +15,9 @@ const props = defineProps<{
 }>()
 const iconPickerCompRef = ref<InstanceType<typeof MenuComp>>()
 
-async function renameLayoutTitle() {
+async function renameLayoutTitle(e: Event) {
   const layout: LayoutModifyProps = {
-    title: props.layoutConf.title,
+    title: (e.target as HTMLInputElement).value,
   }
   await eb.modifyLayout(layout)
 }
@@ -37,7 +37,7 @@ async function setLayoutIcon(icon: string) {
       class="cursor-pointer" @click="e => { iconPickerCompRef?.show(e, MenuOffsetKind.RIGHT_TOP, undefined, true) }"
     />
     <input
-      v-model="props.layoutConf.title" class="flex-1 iw-input iw-input-bordered iw-input-sm w-28" type="text"
+      :value="props.layoutConf.title" class="flex-1 iw-input iw-input-bordered iw-input-sm w-28" type="text"
       :placeholder="$t('layout.title.rename')"
       @change="renameLayoutTitle"
     >

src/components/function/FilterSetting.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, toRaw } from 'vue'
+import { onMounted, ref } from 'vue'
 import * as iconSvg from '../../assets/icon'
 import type { DataKind, DictItemProps, DictItemsResp, FilterDataGroupProps, FilterDataItemProps, FilterDataProps, LayoutModifyProps } from '../../props'
 import { OperatorKind, translateOperatorKind } from '../../props'
@@ -9,6 +9,7 @@ import { MenuOffsetKind, MenuSizeKind } from '../common/Menu'
 import MenuComp from '../common/Menu.vue'
 import type { ColumnConf } from '../conf'
 import * as eb from '../eventbus'
+import { deepToRaw } from '../../utils/vueHelper'
 
 const props = defineProps<{
   // 布局ID
@@ -153,7 +154,7 @@ async function showFilterGroupContainer(e: Event, filterGroupIdx?: number) {
 
     // 设置已选中的过滤项
     // Set the selected filter item
-    const filterItems = toRaw(props.filter.groups[filterGroupIdx].items)
+    const filterItems = deepToRaw(props.filter.groups[filterGroupIdx].items)
     selectedFilterItems.value = filterItems.map((item: FilterDataItemProps) => {
       return convertFilterDataItemToFilterItem(item)
     })
@@ -182,7 +183,7 @@ async function showFilterGroupContainer(e: Event, filterGroupIdx?: number) {
  * @param filterGroupIdx 过滤组ID / Filter group ID
  */
 async function deleteFilterGroup(filterGroupIdx: number) {
-  const filter = toRaw(props.filter!)
+  const filter = deepToRaw(props.filter!)
   filter.groups.splice(filterGroupIdx, 1)
   await eb.modifyLayout({
     filter,
@@ -439,7 +440,7 @@ async function saveFilterGroup() {
   if (currFilterGroup.items.length === 0) {
     return
   }
-  const filterGroups = toRaw(props.filter.groups)
+  const filterGroups = deepToRaw(props.filter.groups)
   if (selectedFilterGroupIdx.value === undefined) {
     filterGroups.push(currFilterGroup)
   }

src/components/function/Pagination.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref, toRaw } from 'vue'
+import { ref } from 'vue'
 import * as iconSvg from '../../assets/icon'
 import type { DataSliceProps, GroupDataProps, LayoutModifyProps } from '../../props'
+import { deepToRaw } from '../../utils/vueHelper'
 import { MenuOffsetKind, MenuSizeKind } from '../common/Menu'
 import MenuComp from '../common/Menu.vue'
 import * as eb from '../eventbus'
@@ -132,7 +133,7 @@ async function setSlice(newPage?: number, newFetchNumber?: number) {
         fetchNumbers: props.slice.fetchNumbers,
       }
     }
-    const groupSlices = toRaw(props.groupProps?.slices) ?? {}
+    const groupSlices = deepToRaw(props.groupProps?.slices) ?? {}
     groupSlices![props.groupValue!] = newSlice
     const changedLayoutReq: LayoutModifyProps = {
       group: {

src/components/function/RowSortSetting.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import Sortable from 'sortablejs'
-import { onMounted, ref, toRaw } from 'vue'
+import { onMounted, ref } from 'vue'
 import * as iconSvg from '../../assets/icon'
 import type { SortDataProps } from '../../props'
+import { deepToRaw } from '../../utils/vueHelper'
 import { MenuOffsetKind } from '../common/Menu'
 import MenuComp from '../common/Menu.vue'
 import type { ColumnConf } from '../conf'
@@ -33,7 +34,7 @@ onMounted(() => {
     async onEnd(evt) {
       if (evt.oldIndex !== evt.newIndex && evt.oldIndex !== -1 && evt.newIndex !== -1) {
         const oriSort = props.sort.items[evt.oldIndex! - 1]
-        const sort = toRaw(props.sort)
+        const sort = deepToRaw(props.sort)
         sort.items.splice(evt.oldIndex! - 1, 1)
         sort.items.splice(evt.newIndex! - 1, 0, oriSort)
         await eb.modifyLayout({

src/components/layout/list/ListColumnAgg.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { h, ref, toRaw } from 'vue'
+import { h, ref } from 'vue'
 import type { AggDataProps, AggregateKind, TableStyleProps } from '../../../props'
 import { showAggMappingByDataKind, translateAggregateKind } from '../../../props'
 import { MenuOffsetKind, MenuSizeKind } from '../../common/Menu'
 import MenuComp from '../../common/Menu.vue'
 import type { ColumnConf } from '../../conf'
 import * as eb from '../../eventbus'
+import { deepToRaw } from '../../../utils/vueHelper'
 
 const props = defineProps<{
   // 布局ID
@@ -72,7 +73,7 @@ function showAggsContextMenu(e: MouseEvent, colIdx: number) {
 }
 
 async function changeColumnAggs(aggKind: AggregateKind, columnName: string) {
-  const agg = toRaw(props.agg)
+  const agg = deepToRaw(props.agg)
   const idx = agg.items.findIndex(item => item.columnName === columnName)
   if (idx === -1) {
     agg.items.push({ columnName, aggKind })

src/utils/vueHelper.ts

@@ -15,7 +15,9 @@ import {
  * @param sourceObj Vue的引用对象 / Vue reference object
  * @returns 原始对象 / Original object
  */
-export function deepToRaw<T extends Record<string, any>>(sourceObj: T): T {
+export function deepToRaw<T extends Record<string, any>>(sourceObj?: T): T {
+  if (sourceObj === undefined)
+    return {} as T
   const objectIterator = (input: any): any => {
     if (Array.isArray(input)) {
       return input.map(item => objectIterator(item))