Refactor #5592 - For DataTable

primefaces · May 2, 2024 · c2d1c57 · c2d1c57
1 parent 3596026
commit c2d1c57
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 173 deletions.
diff --git a/components/lib/column/Column.d.ts b/components/lib/column/Column.d.ts
@@ -139,13 +139,13 @@ export interface ColumnPassThroughOptions {
      */
     columnResizer?: ColumnPassThroughOptionType;
     /**
-     * Used to pass attributes to the header content's DOM element.
+     * Used to pass attributes to the column header content's DOM element.
      */
-    headerContent?: ColumnPassThroughOptionType;
+    columnHeaderContent?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the header title's DOM element.
      */
-    headerTitle?: ColumnPassThroughOptionType;
+    columnTitle?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the sort's DOM element.
      */
@@ -165,23 +165,23 @@ export interface ColumnPassThroughOptions {
     /**
      * Used to pass attributes to the column filter's DOM element.
      */
-    columnFilter?: ColumnPassThroughOptionType;
+    filter?: ColumnPassThroughOptionType;
     /**
-     * Used to pass attributes to the filter input's DOM element.
+     * Used to pass attributes to the filter element container's DOM element.
      */
-    filterInput?: ColumnPassThroughOptionType;
+    filterElementContainer?: ColumnPassThroughOptionType;
     /**
-     * Used to pass attributes to the filter menu button's DOM element.
+     * Used to pass attributes to the column filter button's DOM element.
      */
-    filterMenuButton?: ColumnPassThroughOptionType;
+    columnFilterButton?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the filter menu icon's DOM element.
      */
     filterMenuIcon?: ColumnPassThroughOptionType;
     /**
-     * Used to pass attributes to the header filter clear button's DOM element.
+     * Used to pass attributes to the column filter clear button's DOM element.
      */
-    headerFilterClearButton?: ColumnPassThroughOptionType;
+    columnFilterClearButton?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the filter clear icon's DOM element.
      */
@@ -191,17 +191,17 @@ export interface ColumnPassThroughOptions {
      */
     filterOverlay?: ColumnPassThroughOptionType;
     /**
-     * Used to pass attributes to the filter row items' DOM element.
+     * Used to pass attributes to the filter constraint list's DOM element.
      */
-    filterRowItems?: ColumnPassThroughOptionType;
+    filterConstraintList?: ColumnPassThroughOptionType;
     /**
-     * Used to pass attributes to the filter row item's DOM element.
+     * Used to pass attributes to the filter constraint's DOM element.
      */
-    filterRowItem?: ColumnPassThroughOptionType;
+    filterConstraint?: ColumnPassThroughOptionType;
     /**
-     * Used to pass attributes to the filter separator's DOM element.
+     * Used to pass attributes to the filter constraint separator's DOM element.
      */
-    filterSeparator?: ColumnPassThroughOptionType;
+    filterConstraintSeparator?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the filter operator's DOM element.
      */
@@ -212,18 +212,18 @@ export interface ColumnPassThroughOptions {
      */
     filterOperatorDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the filter constraints' DOM element.
+     * Used to pass attributes to the filter rule list' DOM element.
      */
-    filterConstraints?: ColumnPassThroughOptionType;
+    filterRuleList?: ColumnPassThroughOptionType;
     /**
-     * Used to pass attributes to the filter constraint's DOM element.
+     * Used to pass attributes to the filter rule's DOM element.
      */
-    filterConstraint?: ColumnPassThroughOptionType;
+    filterRule?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the Select component.
      * @see {@link SelectPassThroughOptionType}
      */
-    filterMatchModeDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
+    filterConstraintDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the filter remove button container's DOM element.
      */
@@ -232,16 +232,16 @@ export interface ColumnPassThroughOptions {
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    filterRemoveButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
+    filterRemoveRuleButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the filter add rule's DOM element.
+     * Used to pass attributes to the filter add button container's DOM element.
      */
-    filterAddRule?: ColumnPassThroughOptionType;
+    filterAddButtonContainer?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    filterAddRuleButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
+    filterAddButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the filter buttonbar's DOM element.
      */
@@ -257,21 +257,21 @@ export interface ColumnPassThroughOptions {
      */
     filterApplyButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the body cell's DOM element.
+     * Used to pass attributes to the row toggler button's DOM element.
      */
-    bodyCell?: ColumnPassThroughOptionType;
+    rowToggleButton?: ColumnPassThroughOptionType;
     /**
-     * Used to pass attributes to the rowgroup toggler's DOM element.
+     * Used to pass attributes to the row toggler icon's DOM element.
      */
-    rowGroupToggler?: ColumnPassThroughOptionType;
+    rowToggleIcon?: ColumnPassThroughOptionType;
     /**
-     * Used to pass attributes to the rowgroup toggler icon's DOM element.
+     * Used to pass attributes to the body cell's DOM element.
      */
-    rowGroupTogglerIcon?: ColumnPassThroughOptionType;
+    bodyCell?: ColumnPassThroughOptionType;
     /**
-     * Used to pass attributes to the column title's DOM element.
+     * Used to pass attributes to the reorderable row handle's DOM element.
      */
-    columnTitle?: ColumnPassThroughOptionType;
+    reorderableRowHandle?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the radiobutton's DOM element.
      */
@@ -280,38 +280,18 @@ export interface ColumnPassThroughOptions {
      * Used to pass attributes to the checkbox's DOM element.
      */
     rowCheckbox?: CheckboxPassThroughOptionType;
-    /**
-     * Used to pass attributes to the rowtoggler's DOM element.
-     */
-    rowToggler?: ColumnPassThroughOptionType;
-    /**
-     * Used to pass attributes to the rowtoggler icon's DOM element.
-     */
-    rowTogglerIcon?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the row editor init button's DOM element.
      */
-    rowEditorInitButton?: ColumnPassThroughOptionType;
-    /**
-     * Used to pass attributes to the row editor init icon's DOM element.
-     */
-    rowEditorInitIcon?: ColumnPassThroughOptionType;
+    rowEditorInit?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the row editor save button's DOM element.
      */
-    rowEditorSaveButton?: ColumnPassThroughOptionType;
-    /**
-     * Used to pass attributes to the row editor save icon's DOM element.
-     */
-    rowEditorSaveIcon?: ColumnPassThroughOptionType;
+    rowEditorSave?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the row editor cancel button's DOM element.
      */
-    rowEditorCancelButton?: ColumnPassThroughOptionType;
-    /**
-     * Used to pass attributes to the row editor cancel icon's DOM element.
-     */
-    rowEditorCancelIcon?: ColumnPassThroughOptionType;
+    rowEditorCancel?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the footer cell's DOM element.
      */

diff --git a/components/lib/datatable/BodyCell.vue b/components/lib/datatable/BodyCell.vue
@@ -57,9 +57,9 @@
             />
         </template>
         <template v-else-if="columnProp('rowReorder')">
-            <component v-if="column.children && column.children.rowreordericon" :is="column.children.rowreordericon" :class="cx('rowReorderIcon')" />
-            <i v-else-if="columnProp('rowReorderIcon')" :class="[cx('rowReorderIcon'), columnProp('rowReorderIcon')]" v-bind="getColumnPT('rowReorderIcon')" />
-            <BarsIcon v-else :class="cx('rowReorderIcon')" v-bind="getColumnPT('rowReorderIcon')" />
+            <component v-if="column.children && column.children.rowreordericon" :is="column.children.rowreordericon" :class="cx('reorderableRowHandle')" />
+            <i v-else-if="columnProp('rowReorderIcon')" :class="[cx('reorderableRowHandle'), columnProp('rowReorderIcon')]" v-bind="getColumnPT('reorderableRowHandle')" />
+            <BarsIcon v-else :class="cx('reorderableRowHandle')" v-bind="getColumnPT('reorderableRowHandle')" />
         </template>
         <template v-else-if="columnProp('expander')">
             <button
@@ -85,41 +85,41 @@
         <template v-else-if="editMode === 'row' && columnProp('rowEditor')">
             <Button
                 v-if="!d_editing"
-                :class="cx('rowEditorInitButton')"
+                :class="cx('rowEditorInit')"
                 :aria-label="initButtonAriaLabel"
                 :unstyled="unstyled"
                 @click="onRowEditInit"
-                v-bind="{ ...getColumnPT('rowEditorInitButton'), ...editButtonProps.init }"
+                v-bind="{ ...getColumnPT('rowEditorInit'), ...editButtonProps.init }"
                 data-pc-group-section="rowactionbutton"
             >
                 <template #icon="slotProps">
-                    <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="[cx('rowEditorInitIcon'), slotProps.class]" v-bind="getColumnPT('rowEditorInitIcon')" />
+                    <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="slotProps.class" v-bind="getColumnPT('rowEditorInit')['icon']" />
                 </template>
             </Button>
             <Button
                 v-if="d_editing"
-                :class="cx('rowEditorSaveButton')"
+                :class="cx('rowEditorSave')"
                 :aria-label="saveButtonAriaLabel"
                 :unstyled="unstyled"
                 @click="onRowEditSave"
-                v-bind="{ ...getColumnPT('rowEditorSaveButton'), ...editButtonProps.save }"
+                v-bind="{ ...getColumnPT('rowEditorSave'), ...editButtonProps.save }"
                 data-pc-group-section="rowactionbutton"
             >
                 <template #icon="slotProps">
-                    <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="[cx('rowEditorSaveIcon'), slotProps.class]" v-bind="getColumnPT('rowEditorSaveIcon')" />
+                    <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="slotProps.class" v-bind="getColumnPT('rowEditorSave')['icon']" />
                 </template>
             </Button>
             <Button
                 v-if="d_editing"
-                :class="cx('rowEditorCancelButton')"
+                :class="cx('rowEditorCancel')"
                 :aria-label="cancelButtonAriaLabel"
                 :unstyled="unstyled"
                 @click="onRowEditCancel"
-                v-bind="{ ...getColumnPT('rowEditorCancelButton'), ...editButtonProps.cancel }"
+                v-bind="{ ...getColumnPT('rowEditorCancel'), ...editButtonProps.cancel }"
                 data-pc-group-section="rowactionbutton"
             >
                 <template #icon="slotProps">
-                    <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="[cx('rowEditorCancelIcon'), slotProps.class]" v-bind="getColumnPT('rowEditorCancelIcon')" />
+                    <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="slotProps.class" v-bind="getColumnPT('rowEditorCancel')['icon']" />
                 </template>
             </Button>
         </template>

diff --git a/components/lib/datatable/BodyRow.vue b/components/lib/datatable/BodyRow.vue
@@ -2,13 +2,13 @@
     <template v-if="!empty">
         <tr v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader" :class="cx('rowGroupHeader')" :style="rowGroupHeaderStyle" role="row" v-bind="ptm('rowGroupHeader')">
             <td :colspan="columnsLength - 1" v-bind="{ ...getColumnPT('bodycell'), ...ptm('rowGroupHeaderCell') }">
-                <button v-if="expandableRowGroups" :class="cx('rowGroupToggler')" @click="onRowGroupToggle" type="button" v-bind="ptm('rowGroupToggler')">
+                <button v-if="expandableRowGroups" :class="cx('rowToggleButton')" @click="onRowGroupToggle" type="button" v-bind="ptm('rowToggleButton')">
                     <component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded" />
                     <template v-else>
-                        <span v-if="isRowGroupExpanded && expandedRowIcon" :class="[cx('rowGroupTogglerIcon'), expandedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" />
-                        <ChevronDownIcon v-else-if="isRowGroupExpanded && !expandedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" />
-                        <span v-else-if="!isRowGroupExpanded && collapsedRowIcon" :class="[cx('rowGroupTogglerIcon'), collapsedRowIcon]" v-bind="ptm('rowGroupTogglerIcon')" />
-                        <ChevronRightIcon v-else-if="!isRowGroupExpanded && !collapsedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="ptm('rowGroupTogglerIcon')" />
+                        <span v-if="isRowGroupExpanded && expandedRowIcon" :class="[cx('rowToggleIcon'), expandedRowIcon]" v-bind="ptm('rowToggleIcon')" />
+                        <ChevronDownIcon v-else-if="isRowGroupExpanded && !expandedRowIcon" :class="cx('rowToggleIcon')" v-bind="ptm('rowToggleIcon')" />
+                        <span v-else-if="!isRowGroupExpanded && collapsedRowIcon" :class="[cx('rowToggleIcon'), collapsedRowIcon]" v-bind="ptm('rowToggleIcon')" />
+                        <ChevronRightIcon v-else-if="!isRowGroupExpanded && !collapsedRowIcon" :class="cx('rowToggleIcon')" v-bind="ptm('rowToggleIcon')" />
                     </template>
                 </button>
                 <component :is="templates['groupheader']" :data="rowData" :index="rowIndex" />