Optimize global properties and configuration; refactor event handling…

… to include more events.

docs/TableDemo.vue

@@ -1,18 +1,31 @@
 <template>
   <div style="height: 400px">
-    <!-- <iw-task-table :columns="columns" :events="events" :layouts="layouts"></iw-task-table> -->
-    <iw-task-table :columns="columns" :events="events" :layouts="layouts" :group="group"></iw-task-table>
+    <!-- <iw-task-table  pk-column-name="no" :columns="columns" :events="events" :layouts="layouts"></iw-task-table> -->
+    <iw-task-table pk-column-name="no" :columns="columns" :events="events" :layouts="layouts"
+      :group="group"></iw-task-table>
   </div>
 </template>
 
 <script setup lang="ts">
-import { DataKind, LayoutKind, AggregateKind, TableColumnProps } from '../src/components/props'
+import { AggregateKind, DataKind, LayoutKind, TableColumnProps, TableLayoutModifyReq, TableLayoutProps, TableStyleProps } from '../src/components/props';
+
+const columns = [{ name: 'no', dataKind: DataKind.NUMBER }, { name: 'name' }, { name: 'phone' }, { name: 'addr' }, { name: 'time' }]
 
-const columns = [{ name: 'no', pk: true, fillable: false, dataKind: DataKind.NUMBER }, { name: 'name' }, { name: 'phone' }, { name: 'addr' }, { name: 'time' }]
 const layouts = [{
   id: "hi",
   title: "HI",
   layoutKind: LayoutKind.LIST,
+  columns: [{
+    name: 'no',
+  }, {
+    name: 'name',
+  }, {
+    name: 'phone',
+  }, {
+    name: 'addr',
+  }, {
+    name: 'time',
+  }],
   aggs: { name: AggregateKind.MIN }
 }]
 const group = {
@@ -45,14 +58,28 @@ const events = {
       }, 1000)
     })
   },
-  newColumn: async (newColumnConf: TableColumnProps, fromColumnName?: string) => {
+  loadCellOptions: async (columnName: string, cellValue: any) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve([{ title: 'opt1', value: '选项一' }])
+      }, 1000)
+    })
+  },
+  modifyStyles: async (changedStyleProps: TableStyleProps) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(true)
+      }, 1000)
+    })
+  },
+  newColumn: async (newColumnProps: TableColumnProps, fromColumnName?: string) => {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(true)
       }, 1000)
     })
   },
-  modifyColumn: async (changedColumnConf: TableColumnProps) => {
+  modifyColumn: async (changedColumnProps: TableColumnProps) => {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(true)
@@ -65,6 +92,34 @@ const events = {
         resolve(true)
       }, 1000)
     })
+  },
+  newLayout: async (newLayoutProps: TableLayoutProps, fromLayoutId?: string) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(true)
+      }, 1000)
+    })
+  },
+  modifyLayout: async (changedLayoutProps: TableLayoutModifyReq) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(true)
+      }, 1000)
+    })
+  },
+  deleteLayout: async (deletedLayoutId: string) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(true)
+      }, 1000)
+    })
+  },
+  sortLayouts: async (leftLayoutId: string, rightLayoutId: string) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(true)
+      }, 1000)
+    })
   }
 }
 

src/components/conf.ts

@@ -7,21 +7,24 @@ const { t } = locales.global
 export interface TableBasicConf {
     tableId: string
     pkColumnName: string
+    columns: TableColumnConf[]
+    styles: TableStyleConf
 }
 
-export interface TableStyleConf {
-    tableClass: string
-    size: SizeKind
+export interface TableColumnConf {
+    name: string
+    title: string
+    icon: string
+    dataKind: DataKind
+    dataEditable: boolean
 }
 
 export interface TableLayoutConf {
     id: string
     title: string
     layoutKind: LayoutKind
     icon: string
-    sort: number
-    dateColumn?: { start: string, end: string }
-    fixedColumnIdx: number,
+    columns: TableLayoutColumnConf[]
     filters?: TableDataFilterReq[]
     sorts?: TableDataSortReq[]
     group?: TableDataGroupReq
@@ -30,6 +33,31 @@ export interface TableLayoutConf {
     data?: TableDataResp | TableDataGroupResp[]
 }
 
+export interface TableLayoutColumnConf {
+    name: string
+    wrap: boolean
+    fixed: boolean
+    width: number
+    hide: boolean
+    dateStart: boolean
+    dateEnd: boolean
+}
+
+export interface CachedColumnConf extends TableColumnConf, TableLayoutColumnConf {
+    name: string
+}
+
+
+export interface TableStyleConf {
+    size: SizeKind
+    theme: string
+    tableClass: string
+    headerClass: string
+    rowClass: string
+    cellClass: string
+    aggClass: string
+}
+
 export function getDefaultValueByDataKind(dataKind: DataKind): any {
     switch (dataKind) {
         case DataKind.NUMBER:
@@ -90,61 +118,90 @@ export function getDefaultIconByDataKind(dataKind: DataKind): string {
     }
 }
 
-export function initConf(props: TableProps): [TableBasicConf, { [key: string]: TableLayoutConf }, TableStyleConf] {
-    let layouts: { [key: string]: TableLayoutConf } = {}
-    let sort = 0
+
+export function getDefaultIconByLayoutKind(layoutKind: LayoutKind): string {
+    switch (layoutKind) {
+        case LayoutKind.CHART:
+            return iconSvg.CHART
+        case LayoutKind.CALENDAR:
+            return iconSvg.CALENDAR
+        case LayoutKind.BOARD:
+            return iconSvg.BOARD
+        case LayoutKind.GANTT:
+            return iconSvg.GANTT
+        default:
+            return iconSvg.TEXT
+    }
+}
+
+export function initConf(props: TableProps): [TableBasicConf, TableLayoutConf[]] {
+    const basicConf = {
+        tableId: props.tableId ?? 'iw-table' + Math.floor(Math.random() * 1000000),
+        pkColumnName: props.pkColumnName,
+        columns: props.columns.map(column => {
+            return {
+                name: column.name,
+                title: column.title ?? column.name,
+                dataKind: column.dataKind ?? DataKind.TEXT,
+                icon: column.icon ?? getDefaultIconByDataKind(column.dataKind ?? DataKind.TEXT),
+                dataEditable: column.dataEditable ?? true,
+            }
+        }),
+        styles: {
+            tableClass: props.styles?.tableClass ?? '',
+            headerClass: props.styles?.headerClass ?? '',
+            rowClass: props.styles?.rowClass ?? '',
+            cellClass: props.styles?.cellClass ?? '',
+            aggClass: props.styles?.aggClass ?? '',
+            size: props.styles?.size ?? SizeKind.MEDIUM,
+            theme: ''
+        }
+    }
+    const layoutsConf: TableLayoutConf[] = []
     if (props.layouts) {
         props.layouts.forEach(layout => {
-            let icon = ''
-            switch (layout.layoutKind) {
-                case LayoutKind.CHART:
-                    icon = iconSvg.CHART
-                    break
-                case LayoutKind.CALENDAR:
-                    icon = iconSvg.CALENDAR
-                    break
-                case LayoutKind.BOARD:
-                    icon = iconSvg.BOARD
-                    break
-                case LayoutKind.GANTT:
-                    icon = iconSvg.GANTT
-                    break
-                default:
-                    icon = iconSvg.TEXT
-            }
-            layouts[layout.id] = {
+            layoutsConf.push({
                 id: layout.id,
                 title: layout.title,
                 layoutKind: layout.layoutKind,
-                icon: icon,
-                sort: sort++,
-                dateColumn: layout.dateColumn,
-                fixedColumnIdx: props.columns.findIndex(column => column.name === layout.fixedColumn) ?? -1,
+                icon: layout.icon ?? getDefaultIconByLayoutKind(layout.layoutKind),
+                columns: layout.columns.map(column => {
+                    return {
+                        name: column.name,
+                        wrap: column.wrap ?? true,
+                        fixed: column.fixed ?? false,
+                        width: column.width ?? 200,
+                        hide: column.hide ?? false,
+                        dateStart: column.dateStart ?? false,
+                        dateEnd: column.dateEnd ?? false,
+                    }
+                }),
                 filters: layout.filters,
                 sorts: layout.sorts,
                 group: layout.group,
                 aggs: layout.aggs
-            }
+            })
         })
     } else {
-        layouts['default'] = {
+        layoutsConf.push({
             id: 'default',
             title: t('layout.title.default'),
             layoutKind: LayoutKind.LIST,
             icon: iconSvg.TEXT,
-            sort: sort++,
-            fixedColumnIdx: -1,
+            columns: props.columns.map(column => {
+                return {
+                    name: column.name,
+                    wrap: true,
+                    fixed: false,
+                    width: 200,
+                    hide: false,
+                    dateStart: false,
+                    dateEnd: false,
+                }
+            }),
             filters: [],
             sorts: [],
-        }
+        })
     }
-    return [
-        {
-            tableId: props.tableId ?? 'iw-table' + Math.floor(Math.random() * 1000000),
-            pkColumnName: props.columns.find(column => column.pk)?.name ?? 'id'
-        }, layouts, {
-            tableClass: '',
-            size: SizeKind.MEDIUM
-        }
-    ]
+    return [basicConf, layoutsConf]
 }

src/components/function/resize/resize.vue

@@ -1,15 +1,25 @@
 <script setup lang="ts">
-import * as iconSvg from '../../../assets/icon'
-import { SizeKind } from '../../props'
+import { inject } from 'vue';
+import * as iconSvg from '../../../assets/icon';
+import { FN_MODIFY_STYLES } from '../../../constant';
+import { TableStyleConf } from '../../conf';
+import { SizeKind } from '../../props';
 
 const props = defineProps<{
+  styles: TableStyleConf
   size: SizeKind
 }>()
-const emit = defineEmits(['size'])
+let modifyStyleFun = inject(FN_MODIFY_STYLES)
 
-function setSize(size: SizeKind) {
-  emit('size', size)
+const setSize = async (newSize: SizeKind) => {
+  const tableStyleConf: TableStyleConf = {
+    ...props.styles,
+    size: newSize
+  }
+  // @ts-ignore
+  await modifyStyleFun(tableStyleConf)
 }
+
 </script>
 
 <template>

src/components/function/theme/theme.vue

@@ -1,26 +1,46 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { themeChange } from 'theme-change'
+import { themeChange } from 'theme-change';
+import { inject, onMounted } from 'vue';
+import { FN_MODIFY_STYLES } from '../../../constant';
+import { TableStyleConf } from '../../conf';
+
+const props = defineProps<{
+  styles: TableStyleConf
+}>()
+let modifyStyleFun = inject(FN_MODIFY_STYLES)
 
 onMounted(() => {
   themeChange(false)
 })
 
+const changeTheme = async (event: Event) => {
+  const targetEle = event.target as HTMLElement
+  const theme = targetEle.dataset.setTheme
+  if (theme != undefined) {
+    const tableStyleConf: TableStyleConf = {
+      ...props.styles,
+      theme: theme
+    }
+    // @ts-ignore
+    await modifyStyleFun(tableStyleConf)
+  }
+}
+
 </script>
 
 <template>
   <div class="iw-contextmenu__item w-full pl-1 pr-1  bg-base-200  rounded-md">
-    <div class="flex justify-between items-center">
+    <div class="flex justify-between items-center" @click="changeTheme">
       <button class="badge badge-md" data-set-theme=""
         style="border-width: 1px; border-style: solid; border-color: rgb(87, 13, 248);"></button>
       <button class="badge badge-md" data-set-theme="cupcake"
-        style="border-width: 1px; border-style: solid;border-color: rgb(101, 195, 200);"></button>
+        style="border-width: 1px; border-style: solid; border-color: rgb(101, 195, 200);"></button>
       <button class="badge badge-md" data-set-theme="lofi"
-        style="border-width: 1px; border-style: solid;border-color: rgb(13, 13, 13);"></button>
+        style="border-width: 1px; border-style: solid; border-color: rgb(13, 13, 13);"></button>
       <button class="badge badge-md" data-set-theme="acid"
-        style="border-width: 1px; border-style: solid;border-color: rgb(255, 0, 242);"></button>
+        style="border-width: 1px; border-style: solid; border-color: rgb(255, 0, 242);"></button>
       <button class="badge badge-md" data-set-theme="lemonade"
-        style="border-width: 1px; border-style: solid;border-color: rgb(82, 155, 3);"></button>
+        style="border-width: 1px; border-style: solid; border-color: rgb(82, 155, 3);"></button>
     </div>
     <div class="flex justify-between items-center pt-1">
       <button class="badge badge-md" data-set-theme="dark" style="background-color: black;"></button>