primevuelab 4.0.0-beta.4

package/datatable/FooterCell.vue

@@ -0,0 +1,104 @@
+<template>
+    <td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }" :data-p-frozen-column="columnProp('frozen')">
+        <component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
+        <span v-if="columnProp('footer')" :class="cx('columnFooter')" v-bind="getColumnPT('columnFooter')">{{ columnProp('footer') }}</span>
+    </td>
+</template>
+
+<script>
+import BaseComponent from '@primevuelab/core/basecomponent';
+import { DomHandler, ObjectUtils } from '@primevuelab/core/utils';
+import { mergeProps } from 'vue';
+
+export default {
+    name: 'FooterCell',
+    hostName: 'DataTable',
+    extends: BaseComponent,
+    props: {
+        column: {
+            type: Object,
+            default: null
+        },
+        index: {
+            type: Number,
+            default: null
+        }
+    },
+    data() {
+        return {
+            styleObject: {}
+        };
+    },
+    mounted() {
+        if (this.columnProp('frozen')) {
+            this.updateStickyPosition();
+        }
+    },
+    updated() {
+        if (this.columnProp('frozen')) {
+            this.updateStickyPosition();
+        }
+    },
+    methods: {
+        columnProp(prop) {
+            return ObjectUtils.getVNodeProp(this.column, prop);
+        },
+        getColumnPT(key) {
+            const columnMetaData = {
+                props: this.column.props,
+                parent: {
+                    instance: this,
+                    props: this.$props,
+                    state: this.$data
+                },
+                context: {
+                    index: this.index,
+                    size: this.$parentInstance?.$parentInstance?.size,
+                    showGridlines: this.$parentInstance?.$parentInstance?.showGridlines || false
+                }
+            };
+
+            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
+        },
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
+        },
+        updateStickyPosition() {
+            if (this.columnProp('frozen')) {
+                let align = this.columnProp('alignFrozen');
+
+                if (align === 'right') {
+                    let right = 0;
+                    let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
+
+                    if (next) {
+                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
+                    }
+
+                    this.styleObject.right = right + 'px';
+                } else {
+                    let left = 0;
+                    let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
+
+                    if (prev) {
+                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+                    }
+
+                    this.styleObject.left = left + 'px';
+                }
+            }
+        }
+    },
+    computed: {
+        containerClass() {
+            return [this.columnProp('footerClass'), this.columnProp('class'), this.cx('footerCell')];
+        },
+        containerStyle() {
+            let bodyStyle = this.columnProp('footerStyle');
+            let columnStyle = this.columnProp('style');
+
+            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
+        }
+    }
+};
+</script>

package/datatable/HeaderCell.vue

@@ -0,0 +1,377 @@
+<template>
+    <th
+        :style="containerStyle"
+        :class="containerClass"
+        :tabindex="columnProp('sortable') ? '0' : null"
+        role="columnheader"
+        :colspan="columnProp('colspan')"
+        :rowspan="columnProp('rowspan')"
+        :aria-sort="ariaSort"
+        @click="onClick"
+        @keydown="onKeyDown"
+        @mousedown="onMouseDown"
+        @dragstart="onDragStart"
+        @dragover="onDragOver"
+        @dragleave="onDragLeave"
+        @drop="onDrop"
+        v-bind="{ ...getColumnPT('root'), ...getColumnPT('headerCell') }"
+        :data-p-sortable-column="columnProp('sortable')"
+        :data-p-resizable-column="resizableColumns"
+        :data-p-sorted="isColumnSorted()"
+        :data-p-filter-column="filterColumn"
+        :data-p-frozen-column="columnProp('frozen')"
+        :data-p-reorderable-column="reorderableColumns"
+    >
+        <span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
+        <div :class="cx('columnHeaderContent')" v-bind="getColumnPT('columnHeaderContent')">
+            <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
+            <span v-if="columnProp('header')" :class="cx('columnTitle')" v-bind="getColumnPT('columnTitle')">{{ columnProp('header') }}</span>
+            <span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
+                <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sorticon')" />
+            </span>
+            <Badge v-if="isMultiSorted()" :class="cx('pcSortBadge')" v-bind="getColumnPT('pcSortBadge')" :value="getBadgeValue()" size="small" />
+            <DTHeaderCheckbox
+                v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'"
+                :checked="allRowsSelected"
+                @change="onHeaderCheckboxChange"
+                :disabled="empty"
+                :headerCheckboxIconTemplate="column.children && column.children.headercheckboxicon"
+                :column="column"
+                :unstyled="unstyled"
+                :pt="pt"
+            />
+            <DTColumnFilter
+                v-if="filterDisplay === 'menu' && column.children && column.children.filter"
+                :field="columnProp('filterField') || columnProp('field')"
+                :type="columnProp('dataType')"
+                display="menu"
+                :showMenu="columnProp('showFilterMenu')"
+                :filterElement="column.children && column.children.filter"
+                :filterHeaderTemplate="column.children && column.children.filterheader"
+                :filterFooterTemplate="column.children && column.children.filterfooter"
+                :filterClearTemplate="column.children && column.children.filterclear"
+                :filterApplyTemplate="column.children && column.children.filterapply"
+                :filterIconTemplate="column.children && column.children.filtericon"
+                :filterAddIconTemplate="column.children && column.children.filteraddicon"
+                :filterRemoveIconTemplate="column.children && column.children.filterremoveicon"
+                :filterClearIconTemplate="column.children && column.children.filterclearicon"
+                :filters="filters"
+                :filtersStore="filtersStore"
+                :filterInputProps="filterInputProps"
+                :filterButtonProps="filterButtonProps"
+                @filter-change="$emit('filter-change', $event)"
+                @filter-apply="$emit('filter-apply')"
+                :filterMenuStyle="columnProp('filterMenuStyle')"
+                :filterMenuClass="columnProp('filterMenuClass')"
+                :showOperator="columnProp('showFilterOperator')"
+                :showClearButton="columnProp('showClearButton')"
+                :showApplyButton="columnProp('showApplyButton')"
+                :showMatchModes="columnProp('showFilterMatchModes')"
+                :showAddButton="columnProp('showAddButton')"
+                :matchModeOptions="columnProp('filterMatchModeOptions')"
+                :maxConstraints="columnProp('maxConstraints')"
+                @operator-change="$emit('operator-change', $event)"
+                @matchmode-change="$emit('matchmode-change', $event)"
+                @constraint-add="$emit('constraint-add', $event)"
+                @constraint-remove="$emit('constraint-remove', $event)"
+                @apply-click="$emit('apply-click', $event)"
+                :column="column"
+                :unstyled="unstyled"
+                :pt="pt"
+            />
+        </div>
+    </th>
+</template>
+
+<script>
+import BaseComponent from '@primevuelab/core/basecomponent';
+import { DomHandler, ObjectUtils } from '@primevuelab/core/utils';
+import SortAltIcon from '@primevuelab/icons/sortalt';
+import SortAmountDownIcon from '@primevuelab/icons/sortamountdown';
+import SortAmountUpAltIcon from '@primevuelab/icons/sortamountupalt';
+import Badge from 'primevuelab/badge';
+import { mergeProps } from 'vue';
+import ColumnFilter from './ColumnFilter.vue';
+import HeaderCheckbox from './HeaderCheckbox.vue';
+
+export default {
+    name: 'HeaderCell',
+    hostName: 'DataTable',
+    extends: BaseComponent,
+    emits: [
+        'column-click',
+        'column-mousedown',
+        'column-dragstart',
+        'column-dragover',
+        'column-dragleave',
+        'column-drop',
+        'column-resizestart',
+        'checkbox-change',
+        'filter-change',
+        'filter-apply',
+        'operator-change',
+        'matchmode-change',
+        'constraint-add',
+        'constraint-remove',
+        'filter-clear',
+        'apply-click'
+    ],
+    props: {
+        column: {
+            type: Object,
+            default: null
+        },
+        index: {
+            type: Number,
+            default: null
+        },
+        resizableColumns: {
+            type: Boolean,
+            default: false
+        },
+        groupRowsBy: {
+            type: [Array, String, Function],
+            default: null
+        },
+        sortMode: {
+            type: String,
+            default: 'single'
+        },
+        groupRowSortField: {
+            type: [String, Function],
+            default: null
+        },
+        sortField: {
+            type: [String, Function],
+            default: null
+        },
+        sortOrder: {
+            type: Number,
+            default: null
+        },
+        multiSortMeta: {
+            type: Array,
+            default: null
+        },
+        allRowsSelected: {
+            type: Boolean,
+            default: false
+        },
+        empty: {
+            type: Boolean,
+            default: false
+        },
+        filterDisplay: {
+            type: String,
+            default: null
+        },
+        filters: {
+            type: Object,
+            default: null
+        },
+        filtersStore: {
+            type: Object,
+            default: null
+        },
+        filterColumn: {
+            type: Boolean,
+            default: false
+        },
+        reorderableColumns: {
+            type: Boolean,
+            default: false
+        },
+        filterInputProps: {
+            type: null,
+            default: null
+        },
+        filterButtonProps: {
+            type: null,
+            default: null
+        }
+    },
+    data() {
+        return {
+            styleObject: {}
+        };
+    },
+    mounted() {
+        if (this.columnProp('frozen')) {
+            this.updateStickyPosition();
+        }
+    },
+    updated() {
+        if (this.columnProp('frozen')) {
+            this.updateStickyPosition();
+        }
+    },
+    methods: {
+        columnProp(prop) {
+            return ObjectUtils.getVNodeProp(this.column, prop);
+        },
+        getColumnPT(key) {
+            const columnMetaData = {
+                props: this.column.props,
+                parent: {
+                    instance: this,
+                    props: this.$props,
+                    state: this.$data
+                },
+                context: {
+                    index: this.index,
+                    sortable: this.columnProp('sortable') === '' || this.columnProp('sortable'),
+                    sorted: this.isColumnSorted(),
+                    resizable: this.resizableColumns,
+                    size: this.$parentInstance?.$parentInstance?.size,
+                    showGridlines: this.$parentInstance?.$parentInstance?.showGridlines || false
+                }
+            };
+
+            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
+        },
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
+        },
+        onClick(event) {
+            this.$emit('column-click', { originalEvent: event, column: this.column });
+        },
+        onKeyDown(event) {
+            if ((event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column')) {
+                this.$emit('column-click', { originalEvent: event, column: this.column });
+                event.preventDefault();
+            }
+        },
+        onMouseDown(event) {
+            this.$emit('column-mousedown', { originalEvent: event, column: this.column });
+        },
+        onDragStart(event) {
+            this.$emit('column-dragstart', { originalEvent: event, column: this.column });
+        },
+        onDragOver(event) {
+            this.$emit('column-dragover', { originalEvent: event, column: this.column });
+        },
+        onDragLeave(event) {
+            this.$emit('column-dragleave', { originalEvent: event, column: this.column });
+        },
+        onDrop(event) {
+            this.$emit('column-drop', { originalEvent: event, column: this.column });
+        },
+        onResizeStart(event) {
+            this.$emit('column-resizestart', event);
+        },
+        getMultiSortMetaIndex() {
+            return this.multiSortMeta.findIndex((meta) => meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField'));
+        },
+        getBadgeValue() {
+            let index = this.getMultiSortMetaIndex();
+
+            return this.groupRowsBy && this.groupRowsBy === this.groupRowSortField && index > -1 ? index : index + 1;
+        },
+        isMultiSorted() {
+            return this.sortMode === 'multiple' && this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1;
+        },
+        isColumnSorted() {
+            return this.sortMode === 'single' ? this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField')) : this.isMultiSorted();
+        },
+        updateStickyPosition() {
+            if (this.columnProp('frozen')) {
+                let align = this.columnProp('alignFrozen');
+
+                if (align === 'right') {
+                    let right = 0;
+                    let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
+
+                    if (next) {
+                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
+                    }
+
+                    this.styleObject.right = right + 'px';
+                } else {
+                    let left = 0;
+                    let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
+
+                    if (prev) {
+                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+                    }
+
+                    this.styleObject.left = left + 'px';
+                }
+
+                let filterRow = this.$el.parentElement.nextElementSibling;
+
+                if (filterRow) {
+                    let index = DomHandler.index(this.$el);
+
+                    if (filterRow.children[index]) {
+                        filterRow.children[index].style.left = this.styleObject.left;
+                        filterRow.children[index].style.right = this.styleObject.right;
+                    }
+                }
+            }
+        },
+        onHeaderCheckboxChange(event) {
+            this.$emit('checkbox-change', event);
+        }
+    },
+    computed: {
+        containerClass() {
+            return [this.cx('headerCell'), this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'), this.columnProp('class')];
+        },
+        containerStyle() {
+            let headerStyle = this.filterColumn ? this.columnProp('filterHeaderStyle') : this.columnProp('headerStyle');
+            let columnStyle = this.columnProp('style');
+
+            return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];
+        },
+        sortState() {
+            let sorted = false;
+            let sortOrder = null;
+
+            if (this.sortMode === 'single') {
+                sorted = this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'));
+                sortOrder = sorted ? this.sortOrder : 0;
+            } else if (this.sortMode === 'multiple') {
+                let metaIndex = this.getMultiSortMetaIndex();
+
+                if (metaIndex > -1) {
+                    sorted = true;
+                    sortOrder = this.multiSortMeta[metaIndex].order;
+                }
+            }
+
+            return {
+                sorted,
+                sortOrder
+            };
+        },
+        sortableColumnIcon() {
+            const { sorted, sortOrder } = this.sortState;
+
+            if (!sorted) return SortAltIcon;
+            else if (sorted && sortOrder > 0) return SortAmountUpAltIcon;
+            else if (sorted && sortOrder < 0) return SortAmountDownIcon;
+
+            return null;
+        },
+        ariaSort() {
+            if (this.columnProp('sortable')) {
+                const { sorted, sortOrder } = this.sortState;
+
+                if (sorted && sortOrder < 0) return 'descending';
+                else if (sorted && sortOrder > 0) return 'ascending';
+                else return 'none';
+            } else {
+                return null;
+            }
+        }
+    },
+    components: {
+        Badge,
+        DTHeaderCheckbox: HeaderCheckbox,
+        DTColumnFilter: ColumnFilter,
+        SortAltIcon: SortAltIcon,
+        SortAmountUpAltIcon: SortAmountUpAltIcon,
+        SortAmountDownIcon: SortAmountDownIcon
+    }
+};
+</script>

package/datatable/HeaderCheckbox.vue

@@ -0,0 +1,67 @@
+<template>
+    <Checkbox :modelValue="checked" :binary="true" :disabled="disabled" :aria-label="headerCheckboxAriaLabel" @change="onChange" :pt="getColumnPT('pcHeaderCheckbox')">
+        <template #icon="slotProps">
+            <component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" />
+            <CheckIcon v-else-if="!headerCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('pcHeaderCheckbox.icon')" />
+        </template>
+    </Checkbox>
+</template>
+
+<script>
+import BaseComponent from '@primevuelab/core/basecomponent';
+import CheckIcon from '@primevuelab/icons/check';
+import Checkbox from 'primevuelab/checkbox';
+import { mergeProps } from 'vue';
+
+export default {
+    name: 'HeaderCheckbox',
+    hostName: 'DataTable',
+    extends: BaseComponent,
+    emits: ['change'],
+    props: {
+        checked: null,
+        disabled: null,
+        column: null,
+        headerCheckboxIconTemplate: {
+            type: Function,
+            default: null
+        }
+    },
+    methods: {
+        getColumnPT(key) {
+            const columnMetaData = {
+                props: this.column.props,
+                parent: {
+                    instance: this,
+                    props: this.$props,
+                    state: this.$data
+                },
+                context: {
+                    checked: this.checked,
+                    disabled: this.disabled
+                }
+            };
+
+            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
+        },
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
+        },
+        onChange(event) {
+            this.$emit('change', {
+                originalEvent: event,
+                checked: !this.checked
+            });
+        }
+    },
+    computed: {
+        headerCheckboxAriaLabel() {
+            return this.$primevue.config.locale.aria ? (this.checked ? this.$primevue.config.locale.aria.selectAll : this.$primevue.config.locale.aria.unselectAll) : undefined;
+        }
+    },
+    components: {
+        CheckIcon,
+        Checkbox
+    }
+};
+</script>

package/datatable/RowCheckbox.vue

@@ -0,0 +1,74 @@
+<template>
+    <Checkbox :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :aria-label="checkboxAriaLabel" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('pcRowCheckbox')">
+        <template #icon="slotProps">
+            <component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" />
+            <CheckIcon v-else-if="!rowCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('pcRowCheckbox.icon')" />
+        </template>
+    </Checkbox>
+</template>
+
+<script>
+import BaseComponent from '@primevuelab/core/basecomponent';
+import CheckIcon from '@primevuelab/icons/check';
+import Checkbox from 'primevuelab/checkbox';
+import { mergeProps } from 'vue';
+
+export default {
+    name: 'RowCheckbox',
+    hostName: 'DataTable',
+    extends: BaseComponent,
+    emits: ['change'],
+    props: {
+        value: null,
+        checked: null,
+        column: null,
+        rowCheckboxIconTemplate: {
+            type: Function,
+            default: null
+        },
+        index: {
+            type: Number,
+            default: null
+        }
+    },
+    methods: {
+        getColumnPT(key) {
+            const columnMetaData = {
+                props: this.column.props,
+                parent: {
+                    instance: this,
+                    props: this.$props,
+                    state: this.$data
+                },
+                context: {
+                    index: this.index,
+                    checked: this.checked,
+                    disabled: this.$attrs.disabled
+                }
+            };
+
+            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
+        },
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
+        },
+        onChange(event) {
+            if (!this.$attrs.disabled) {
+                this.$emit('change', {
+                    originalEvent: event,
+                    data: this.value
+                });
+            }
+        }
+    },
+    computed: {
+        checkboxAriaLabel() {
+            return this.$primevue.config.locale.aria ? (this.checked ? this.$primevue.config.locale.aria.selectRow : this.$primevue.config.locale.aria.unselectRow) : undefined;
+        }
+    },
+    components: {
+        CheckIcon,
+        Checkbox
+    }
+};
+</script>

package/datatable/RowRadioButton.vue

@@ -0,0 +1,59 @@
+<template>
+    <RadioButton :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :name="name" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('pcRowRadiobutton')" />
+</template>
+
+<script>
+import BaseComponent from '@primevuelab/core/basecomponent';
+import RadioButton from 'primevuelab/radiobutton';
+import { mergeProps } from 'vue';
+
+export default {
+    name: 'RowRadioButton',
+    hostName: 'DataTable',
+    extends: BaseComponent,
+    emits: ['change'],
+    props: {
+        value: null,
+        checked: null,
+        name: null,
+        column: null,
+        index: {
+            type: Number,
+            default: null
+        }
+    },
+    methods: {
+        getColumnPT(key) {
+            const columnMetaData = {
+                props: this.column.props,
+                parent: {
+                    instance: this,
+                    props: this.$props,
+                    state: this.$data
+                },
+                context: {
+                    index: this.index,
+                    checked: this.checked,
+                    disabled: this.$attrs.disabled
+                }
+            };
+
+            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
+        },
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
+        },
+        onChange(event) {
+            if (!this.$attrs.disabled) {
+                this.$emit('change', {
+                    originalEvent: event,
+                    data: this.value
+                });
+            }
+        }
+    },
+    components: {
+        RadioButton
+    }
+};
+</script>