Add mini mode.

Author: gudaoxuri

docs/TableDemo.vue

@@ -610,6 +610,7 @@ const layouts: IwProps.SimpleLayoutProps[] = [
 ]
 
 const _tableProps: IwProps.SimpleTableProps = {
+  // mini: true,
   pkColumnName: 'no',
   parentPkColumnName: 'pno',
   columns,

src/Skeleton.vue

@@ -58,9 +58,11 @@ function setHeight() {
   // Set table height
   Array.prototype.forEach.call(document.getElementsByClassName('iw-tt'), (ttEle) => {
     const outHeight = ttEle.parentElement?.clientHeight
-    const headerHeight = ttEle.getElementsByClassName('iw-tt-header')[0].offsetHeight
+    const headerEle = ttEle.getElementsByClassName('iw-tt-header')
+    const headerHeight = headerEle.length > 0 ? headerEle[0].offsetHeight : 0
     Array.prototype.forEach.call(ttEle.getElementsByClassName('iw-tt-layout'), (layoutEle) => {
-      const toolbarHeight = layoutEle.getElementsByClassName('iw-tt-toolbar').length > 0 ? layoutEle.getElementsByClassName('iw-tt-toolbar')[0].offsetHeight : 0
+      const toolbarEle = layoutEle.getElementsByClassName('iw-tt-toolbar')
+      const toolbarHeight = toolbarEle.length > 0 ? toolbarEle[0].offsetHeight : 0
       const footerHeight = layoutEle.getElementsByClassName('iw-tt-footer')[0].offsetHeight
       layoutEle.getElementsByClassName('iw-tt-table')[0].style.height = `${outHeight - headerHeight - toolbarHeight - footerHeight}px`
     })
@@ -121,9 +123,11 @@ onMounted(async () => {
     :class="`${tableConf.styles.tableClass} iw-tt w-full text-sm text-base-content bg-base-100 relative`"
   >
     <div
+      v-if="!tableConf.mini || tableConf.quickSearch"
       :class="`${tableConf.styles.headerClass} iw-tt-header flex justify-between p-0 min-h-0`"
     >
       <ScrollableComp
+        v-if="!tableConf.mini"
         class="flex-1"
       >
         <div class="tablist iw-tabs iw-tabs-sm iw-tabs-boxed">
@@ -139,13 +143,17 @@ onMounted(async () => {
           </a>
         </div>
       </ScrollableComp>
+      <div v-else class="flex-1">
+        &nbsp;
+      </div>
       <div class="flex items-center">
         <QuickSearchComp
           v-if="tableConf.quickSearch"
           class="mx-2"
           :quick-search="tableConf.quickSearch"
         />
         <TableSettingComp
+          v-if="!tableConf.mini"
           :table-conf="tableConf"
           :layout-conf="currentLayoutConf"
           :layout-columns-conf="currentLayoutColumnsConf"
@@ -156,7 +164,7 @@ onMounted(async () => {
     <template v-for="layout in layoutsConf" :key="layout.id">
       <div v-show="currentLayoutId === layout.id" :id="`iw-tt-layout-${layout.id}`" class="iw-tt-layout">
         <div
-          v-if="layout.sort || layout.filter"
+          v-if="!tableConf.mini && (layout.sort || layout.filter)"
           class="iw-tt-toolbar flex items-center h-8 p-0.5"
         >
           <RowSortSettingComp v-if="layout.sort" :layout-id="layout.id" :sort="layout.sort" :layout-columns-conf="currentLayoutColumnsConf" />

src/components/conf.ts

@@ -14,6 +14,7 @@ export interface TableConf extends CommonFunctionProps {
   columns: TableColumnProps[]
   styles: TableStyleProps
   quickSearch?: QuickSearchProps
+  mini: boolean
 }
 
 export interface LayoutConf extends LayoutProps {
@@ -46,6 +47,7 @@ export function init(props: SimpleTableProps): {
     columns: tableProps.columns,
     styles: tableProps.styles,
     quickSearch: tableProps.quickSearch,
+    mini: tableProps.mini,
 
     slice: tableProps.slice,
     showSelectColumn: tableProps.showSelectColumn,

src/props/kernelProps.ts

@@ -89,6 +89,8 @@ export interface TableProps extends CommonFunctionProps {
   styles: TableStyleProps
 
   quickSearch?: QuickSearchProps
+
+  mini: boolean
 }
 export interface SimpleTableProps extends SimpleCommonFunctionProps {
   id?: string
@@ -99,6 +101,8 @@ export interface SimpleTableProps extends SimpleCommonFunctionProps {
   events: TableEventProps
   styles?: SimpleTableStyleProps
   quickSearch?: QuickSearchProps
+
+  mini?: boolean
 }
 export function generateTableProps(simple: SimpleTableProps): TableProps {
   const columns = simple.columns.map(col => generateTableColumnProps(col))
@@ -117,6 +121,7 @@ export function generateTableProps(simple: SimpleTableProps): TableProps {
       ...commonFunctions,
     })),
     styles: generateTableStyleProps(simple.styles ?? {}),
+    mini: simple.mini ?? false,
   }
 }