Merge pull request #87 from HC200ok/extract-props

Optimize: extract props from dataTable component

Author: HC200ok

package.json

@@ -3,7 +3,7 @@
   "author": "HC200ok",
   "description": "A customizable and easy-to-use data table component made with Vue.js 3.x.",
   "private": false,
-  "version": "1.4.2",
+  "version": "1.4.5",
   "types": "./types/main.d.ts",
   "license": "MIT",
   "files": [

src/components/DataTable.vue

@@ -240,168 +240,22 @@ import useRows from '../hooks/useRows';
 import useServerOptions from '../hooks/useServerOptions';
 import useTotalItems from '../hooks/useTotalItems';
 
-import type {
-  SortType, Header, Item, ServerOptions, FilterOption,
-  HeaderItemClassNameFunction, BodyItemClassNameFunction, BodyRowClassNameFunction,
-} from '../types/main';
-
+import type { Header, Item } from '../types/main';
 import type { HeaderForRender } from '../types/internal';
 
 // eslint-disable-next-line import/extensions
 import { generateColumnContent } from '../utils';
+import withOptionalProps from '../withOptionalProps';
 
 const props = defineProps({
-  alternating: {
-    type: Boolean,
-    default: false,
-  },
-  buttonsPagination: {
-    type: Boolean,
-    default: false,
-  },
-  checkboxColumnWidth: {
-    type: Number,
-    default: null,
-  },
-  emptyMessage: {
-    type: String,
-    default: 'No Available Data',
-  },
-  expandColumnWidth: {
-    type: Number,
-    default: 36,
-  },
-  filterOptions: {
-    type: Array as PropType<FilterOption[]>,
-    default: null,
-  },
-  fixedExpand: {
-    type: Boolean,
-    default: false,
-  },
-  fixedHeader: {
-    type: Boolean,
-    default: true,
-  },
-  fixedCheckbox: {
-    type: Boolean,
-    default: false,
-  },
-  fixedIndex: {
-    type: Boolean,
-    default: false,
-  },
-  headers: {
-    type: Array as PropType<Header[]>,
-    required: true,
-  },
-  hideFooter: {
-    type: Boolean,
-    default: false,
-  },
-  hideRowsPerPage: {
-    type: Boolean,
-    default: false,
-  },
-  hideHeader: {
-    type: Boolean,
-    default: false,
-  },
-  indexColumnWidth: {
-    type: Number,
-    default: 60,
-  },
+  ...withOptionalProps,
   items: {
     type: Array as PropType<Item[]>,
     required: true,
   },
-  itemsSelected: {
-    type: Array as PropType<Item[]> | null,
-    default: null,
-  },
-  loading: {
-    type: Boolean,
-    deault: false,
-  },
-  rowsPerPage: {
-    type: Number,
-    default: 25,
-  },
-  rowsItems: {
-    type: Array as PropType<number[]>,
-    default: () => [25, 50, 100],
-  },
-  rowsPerPageMessage: {
-    type: String,
-    default: 'rows per page:',
-  },
-  searchField: {
-    type: String,
-    default: '',
-  },
-  searchValue: {
-    type: String,
-    default: '',
-  },
-  serverOptions: {
-    type: Object as PropType<ServerOptions> | null,
-    default: null,
-  },
-  serverItemsLength: {
-    type: Number,
-    default: 0,
-  },
-  showIndex: {
-    type: Boolean,
-    default: false,
-  },
-  sortBy: {
-    type: String,
-    default: '',
-  },
-  sortType: {
-    type: String as PropType<SortType>,
-    default: 'asc',
-  },
-  tableHeight: {
-    type: Number,
-    default: null,
-  },
-  themeColor: {
-    type: String,
-    default: '#42b883',
-  },
-  tableClassName: {
-    type: String,
-    default: '',
-  },
-  headerClassName: {
-    type: String,
-    default: '',
-  },
-  headerItemClassName: {
-    type: [Function, String] as PropType<HeaderItemClassNameFunction | string>,
-    default: '',
-  },
-  bodyRowClassName: {
-    type: [Function, String] as PropType<BodyRowClassNameFunction | string>,
-    default: '',
-  },
-  bodyItemClassName: {
-    type: [Function, String] as PropType<BodyItemClassNameFunction | string>,
-    default: '',
-  },
-  noHover: {
-    type: Boolean,
-    default: false,
-  },
-  borderCell: {
-    type: Boolean,
-    default: false,
-  },
-  mustSort: {
-    type: Boolean,
-    default: false,
+  headers: {
+    type: Array as PropType<Header[]>,
+    required: true,
   },
 });
 

src/modes/Client.vue

@@ -87,8 +87,8 @@
 import {
   computed, ref, reactive, toRefs,
 } from 'vue';
-import {
-  Header, Item, FilterOption, clickRowArgument, HeaderItemClassNameFunction, BodyItemClassNameFunction, BodyRowClassNameFunction,
+import type {
+  Header, Item, FilterOption, ClickRowArgument, HeaderItemClassNameFunction, BodyItemClassNameFunction, BodyRowClassNameFunction,
 } from '../types/main';
 import DataTable from '../components/DataTable.vue';
 import { mockClientNestedItems, mockClientItems, mockDuplicateClientNestedItems } from '../mock';
@@ -132,7 +132,7 @@ const headers: Header[] = [
 
 const itemsSelected = ref<Item[]>([items.value[14]]);
 
-const showItem = (item: clickRowArgument) => {
+const showItem = (item: ClickRowArgument) => {
   console.log('item');
   console.log(JSON.stringify(item));
 };

src/types/main.d.ts

@@ -37,7 +37,7 @@ export type ServerOptions = {
   sortType?: SortType
 }
 
-export type clickRowArgument = Item & {
+export type ClickRowArgument = Item & {
   isSelected?: boolean
   indexInCurrentPage?: number
 }

src/withOptionalProps.ts

@@ -0,0 +1,152 @@
+import { PropType } from 'vue';
+import type {
+  SortType, Item, ServerOptions, FilterOption,
+  HeaderItemClassNameFunction, BodyItemClassNameFunction, BodyRowClassNameFunction,
+} from './types/main';
+
+export default {
+  alternating: {
+    type: Boolean,
+    default: false,
+  },
+  buttonsPagination: {
+    type: Boolean,
+    default: false,
+  },
+  checkboxColumnWidth: {
+    type: Number,
+    default: null,
+  },
+  emptyMessage: {
+    type: String,
+    default: 'No Available Data',
+  },
+  expandColumnWidth: {
+    type: Number,
+    default: 36,
+  },
+  filterOptions: {
+    type: Array as PropType<FilterOption[]>,
+    default: null,
+  },
+  fixedExpand: {
+    type: Boolean,
+    default: false,
+  },
+  fixedHeader: {
+    type: Boolean,
+    default: true,
+  },
+  fixedCheckbox: {
+    type: Boolean,
+    default: false,
+  },
+  fixedIndex: {
+    type: Boolean,
+    default: false,
+  },
+  hideFooter: {
+    type: Boolean,
+    default: false,
+  },
+  hideRowsPerPage: {
+    type: Boolean,
+    default: false,
+  },
+  hideHeader: {
+    type: Boolean,
+    default: false,
+  },
+  indexColumnWidth: {
+    type: Number,
+    default: 60,
+  },
+  itemsSelected: {
+    type: Array as PropType<Item[]> | null,
+    default: null,
+  },
+  loading: {
+    type: Boolean,
+    deault: false,
+  },
+  rowsPerPage: {
+    type: Number,
+    default: 25,
+  },
+  rowsItems: {
+    type: Array as PropType<number[]>,
+    default: () => [25, 50, 100],
+  },
+  rowsPerPageMessage: {
+    type: String,
+    default: 'rows per page:',
+  },
+  searchField: {
+    type: String,
+    default: '',
+  },
+  searchValue: {
+    type: String,
+    default: '',
+  },
+  serverOptions: {
+    type: Object as PropType<ServerOptions> | null,
+    default: null,
+  },
+  serverItemsLength: {
+    type: Number,
+    default: 0,
+  },
+  showIndex: {
+    type: Boolean,
+    default: false,
+  },
+  sortBy: {
+    type: String,
+    default: '',
+  },
+  sortType: {
+    type: String as PropType<SortType>,
+    default: 'asc',
+  },
+  tableHeight: {
+    type: Number,
+    default: null,
+  },
+  themeColor: {
+    type: String,
+    default: '#42b883',
+  },
+  tableClassName: {
+    type: String,
+    default: '',
+  },
+  headerClassName: {
+    type: String,
+    default: '',
+  },
+  headerItemClassName: {
+    type: [Function, String] as PropType<HeaderItemClassNameFunction | string>,
+    default: '',
+  },
+  bodyRowClassName: {
+    type: [Function, String] as PropType<BodyRowClassNameFunction | string>,
+    default: '',
+  },
+  bodyItemClassName: {
+    type: [Function, String] as PropType<BodyItemClassNameFunction | string>,
+    default: '',
+  },
+  noHover: {
+    type: Boolean,
+    default: false,
+  },
+  borderCell: {
+    type: Boolean,
+    default: false,
+  },
+  mustSort: {
+    type: Boolean,
+    default: false,
+  },
+}

types/main.d.ts

@@ -37,7 +37,7 @@ export type ServerOptions = {
   sortType?: SortType
 }
 
-export type clickRowArgument = Item & {
+export type ClickRowArgument = Item & {
   isSelected?: boolean
   indexInCurrentPage?: number
 }