Merge branch 'v4' of https://github.com/primefaces/primevue into v4

primefaces · Mar 26, 2024 · 6ddb850 · 6ddb850
2 parents e0865bf + 636c89e
commit 6ddb850
Show file tree

Hide file tree

Showing 37 changed files with 191 additions and 431 deletions.
diff --git a/api-generator/components/dataviewlayoutoptions.js b/api-generator/components/dataviewlayoutoptions.js
diff --git a/components/doc/codeeditor/templates.js b/components/doc/codeeditor/templates.js
@@ -173,7 +173,6 @@ import ConfirmationService from 'primevue/confirmationservice';
 import ContextMenu from 'primevue/contextmenu';
 import DataTable from 'primevue/datatable';
 import DataView from 'primevue/dataview';
-import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions';
 import DeferredContent from 'primevue/deferredcontent';
 import Dialog from 'primevue/dialog';
 import DialogService from 'primevue/dialogservice'
@@ -294,7 +293,6 @@ app.component('ConfirmPopup', ConfirmPopup);
 app.component('ContextMenu', ContextMenu);
 app.component('DataTable', DataTable);
 app.component('DataView', DataView);
-app.component('DataViewLayoutOptions', DataViewLayoutOptions);
 app.component('DeferredContent', DeferredContent);
 app.component('Dialog', Dialog);
 app.component('Divider', Divider);

diff --git a/components/lib/config/PrimeVue.d.ts b/components/lib/config/PrimeVue.d.ts
@@ -26,7 +26,6 @@ import { ConfirmPopupPassThroughOptions } from '../confirmpopup';
 import { ContextMenuPassThroughOptions } from '../contextmenu';
 import { DataTablePassThroughOptions } from '../datatable';
 import { DataViewPassThroughOptions } from '../dataview';
-import { DataViewLayoutOptionsPassThroughOptions } from '../dataviewlayoutoptions';
 import { DeferredContentPassThroughOptions } from '../deferredcontent';
 import { DialogPassThroughOptions } from '../dialog';
 import { DividerPassThroughOptions } from '../divider';
@@ -148,7 +147,6 @@ export interface PrimeVuePTOptions {
     contextmenu?: DefaultPassThrough<ContextMenuPassThroughOptions>;
     datatable?: DefaultPassThrough<DataTablePassThroughOptions>;
     dataview?: DefaultPassThrough<DataViewPassThroughOptions>;
-    dataviewlayoutoptions?: DefaultPassThrough<DataViewLayoutOptionsPassThroughOptions>;
     deferredcontent?: DefaultPassThrough<DeferredContentPassThroughOptions>;
     divider?: DefaultPassThrough<DividerPassThroughOptions>;
     dialog?: DefaultPassThrough<DialogPassThroughOptions>;

diff --git a/components/lib/datatable/BaseDataTable.vue b/components/lib/datatable/BaseDataTable.vue
@@ -273,6 +273,17 @@ export default {
         filterInputProps: {
             type: null,
             default: null
+        },
+        filterButtonProps: {
+            type: Object,
+            default() {
+                return {
+                    addRule: { severity: 'info', text: true, size: 'small' },
+                    removeRule: { severity: 'danger', text: true, size: 'small' },
+                    apply: { size: 'small' },
+                    clear: { outlined: true, size: 'small' }
+                };
+            }
         }
     },
     style: DataTableStyle,

diff --git a/components/lib/datatable/ColumnFilter.vue b/components/lib/datatable/ColumnFilter.vue
@@ -94,9 +94,7 @@
                                         @click="removeConstraint(i)"
                                         :label="removeRuleButtonLabel"
                                         :unstyled="unstyled"
-                                        text
-                                        severity="danger"
-                                        size="small"
+                                        v-bind="filterButtonProps.removeRule"
                                         :pt="getColumnPT('filterRemoveButton')"
                                     >
                                         <template #icon="iconProps">
@@ -114,9 +112,7 @@
                                 :class="cx('filterAddRuleButton')"
                                 @click="addConstraint()"
                                 :unstyled="unstyled"
-                                text
-                                severity="info"
-                                size="small"
+                                v-bind="filterButtonProps.addRule"
                                 :pt="getColumnPT('filterAddRuleButton')"
                             >
                                 <template #icon="iconProps">
@@ -132,13 +128,21 @@
                                 :label="clearButtonLabel"
                                 @click="clearFilter"
                                 :unstyled="unstyled"
-                                size="small"
-                                outlined
+                                v-bind="filterButtonProps.clear"
                                 :pt="getColumnPT('filterClearButton')"
                             ></CFButton>
                             <component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
                             <template v-if="showApplyButton">
-                                <CFButton v-if="!filterApplyTemplate" type="button" :class="cx('filterApplyButton')" :label="applyButtonLabel" @click="applyFilter()" :unstyled="unstyled" size="small" :pt="getColumnPT('filterApplyButton')"></CFButton>
+                                <CFButton
+                                    v-if="!filterApplyTemplate"
+                                    type="button"
+                                    :class="cx('filterApplyButton')"
+                                    :label="applyButtonLabel"
+                                    @click="applyFilter()"
+                                    :unstyled="unstyled"
+                                    v-bind="filterButtonProps.apply"
+                                    :pt="getColumnPT('filterApplyButton')"
+                                ></CFButton>
                                 <component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
                             </template>
                         </div>
@@ -275,6 +279,10 @@ export default {
             type: null,
             default: null
         },
+        filterButtonProps: {
+            type: null,
+            default: null
+        },
         column: null
     },
     data() {

diff --git a/components/lib/datatable/DataTable.d.ts b/components/lib/datatable/DataTable.d.ts
@@ -9,6 +9,7 @@
  */
 import { InputHTMLAttributes, TableHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
+import { ButtonProps } from '../button';
 import { ColumnPassThroughOptionType } from '../column';
 import { ColumnGroupPassThroughOptionType } from '../columngroup';
 import { PaginatorPassThroughOptionType } from '../paginator';
@@ -159,6 +160,28 @@ export interface DataTableExportCSVOptions {
     selectionOnly: boolean;
 }
 
+/**
+ * Custom datatable filter button props options.
+ */
+export interface DataTableFilterButtonPropsOptions {
+    /**
+     * Add rule button props
+     */
+    addRule: ButtonProps | undefined;
+    /**
+     * Remove rule button props
+     */
+    removeRule: ButtonProps | undefined;
+    /**
+     * Apply button props
+     */
+    apply: ButtonProps | undefined;
+    /**
+     * Apply button props
+     */
+    clear: ButtonProps | undefined;
+}
+
 /**
  * Custom sort event.
  * @see {@link DataTableEmits.sort}
@@ -1130,6 +1153,16 @@ export interface DataTableProps {
      * Used to pass all properties of the HTMLInputElement to the focusable filter input element inside the component.
      */
     filterInputProps?: InputHTMLAttributes | undefined;
+    /**
+     * Used to pass all filter button property object
+     * @defaultValue {
+            addRule: { severity: 'info', text: true, size: 'small' },
+            removeRule: { severity: 'danger', text: true, size: 'small' },
+            apply: { size: 'small' },
+            clear: { outlined: true, size: 'small' }
+        }
+     */
+    filterButtonProps?: DataTableFilterButtonPropsOptions | undefined;
     /**
      * Used to pass attributes to DOM elements inside the component.
      * @type {DataTablePassThroughOptions}

diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue
@@ -86,6 +86,7 @@
                             :filters="d_filters"
                             :filtersStore="filters"
                             :filterDisplay="filterDisplay"
+                            :filterButtonProps="headerFilterButtonProps"
                             :filterInputProps="filterInputProps"
                             :first="d_first"
                             @column-click="onColumnHeaderClick($event)"
@@ -2069,6 +2070,17 @@ export default {
         groupRowSortField() {
             return this.sortMode === 'single' ? this.sortField : this.d_groupRowsSortMeta ? this.d_groupRowsSortMeta.field : null;
         },
+        headerFilterButtonProps() {
+            return {
+                ...{
+                    addRule: { severity: 'info', text: true, size: 'small' },
+                    removeRule: { severity: 'danger', text: true, size: 'small' },
+                    apply: { size: 'small' },
+                    clear: { outlined: true, size: 'small' }
+                },
+                ...this.filterButtonProps
+            };
+        },
         virtualScrollerDisabled() {
             return ObjectUtils.isEmpty(this.virtualScrollerOptions) || !this.scrollable;
         }

diff --git a/components/lib/datatable/HeaderCell.vue b/components/lib/datatable/HeaderCell.vue
@@ -58,6 +58,7 @@
                 :filters="filters"
                 :filtersStore="filtersStore"
                 :filterInputProps="filterInputProps"
+                :filterButtonProps="filterButtonProps"
                 @filter-change="$emit('filter-change', $event)"
                 @filter-apply="$emit('filter-apply')"
                 :filterMenuStyle="columnProp('filterMenuStyle')"
@@ -182,6 +183,10 @@ export default {
         filterInputProps: {
             type: null,
             default: null
+        },
+        filterButtonProps: {
+            type: null,
+            default: null
         }
     },
     data() {

diff --git a/components/lib/datatable/TableHeader.vue b/components/lib/datatable/TableHeader.vue
@@ -29,6 +29,7 @@
                         :filterDisplay="filterDisplay"
                         :filtersStore="filtersStore"
                         :filterInputProps="filterInputProps"
+                        :filterButtonProps="filterButtonProps"
                         :first="first"
                         @filter-change="$emit('filter-change', $event)"
                         @filter-apply="$emit('filter-apply')"
@@ -69,6 +70,7 @@
                             :filters="filters"
                             :filtersStore="filtersStore"
                             :filterInputProps="filterInputProps"
+                            :filterButtonProps="filterButtonProps"
                             @filter-change="$emit('filter-change', $event)"
                             @filter-apply="$emit('filter-apply')"
                             :filterMenuStyle="columnProp(col, 'filterMenuStyle')"
@@ -231,6 +233,10 @@ export default {
         filterInputProps: {
             type: null,
             default: null
+        },
+        filterButtonProps: {
+            type: null,
+            default: null
         }
     },
     provide() {

diff --git a/components/lib/dataview/DataView.d.ts b/components/lib/dataview/DataView.d.ts
@@ -328,7 +328,7 @@ export interface DataViewEmits {
 }
 
 /**
- * **PrimeVue - DataViewLayoutOptions**
+ * **PrimeVue - DataView**
  *
  * _DataView displays data in grid or list layout with pagination and sorting features._
  *

diff --git a/components/lib/dataviewlayoutoptions/BaseDataViewLayoutOptions.vue b/components/lib/dataviewlayoutoptions/BaseDataViewLayoutOptions.vue