primevue/datatable/index.mjs.map

PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc

{"version":3,"file":"index.mjs","sources":["../../src/datatable/BaseDataTable.vue","../../src/datatable/RowCheckbox.vue","../../src/datatable/RowCheckbox.vue?vue&type=template&id=737048ec&lang.js","../../src/datatable/RowRadioButton.vue","../../src/datatable/RowRadioButton.vue?vue&type=template&id=4c71d642&lang.js","../../src/datatable/BodyCell.vue","../../src/datatable/BodyCell.vue?vue&type=template&id=223dc796&lang.js","../../src/datatable/BodyRow.vue","../../src/datatable/BodyRow.vue?vue&type=template&id=fb011038&lang.js","../../src/datatable/TableBody.vue","../../src/datatable/TableBody.vue?vue&type=template&id=c76f1efc&lang.js","../../src/datatable/FooterCell.vue","../../src/datatable/FooterCell.vue?vue&type=template&id=dcaeafd8&lang.js","../../src/datatable/TableFooter.vue","../../src/datatable/TableFooter.vue?vue&type=template&id=2895da87&lang.js","../../src/datatable/ColumnFilter.vue","../../src/datatable/ColumnFilter.vue?vue&type=template&id=12640d99&lang.js","../../src/datatable/HeaderCheckbox.vue","../../src/datatable/HeaderCheckbox.vue?vue&type=template&id=2d543024&lang.js","../../src/datatable/FilterHeaderCell.vue","../../src/datatable/FilterHeaderCell.vue?vue&type=template&id=1923dfa4&lang.js","../../src/datatable/HeaderCell.vue","../../src/datatable/HeaderCell.vue?vue&type=template&id=11cfc911&lang.js","../../src/datatable/TableHeader.vue","../../src/datatable/TableHeader.vue?vue&type=template&id=13736116&lang.js","../../src/datatable/DataTable.vue","../../src/datatable/DataTable.vue?vue&type=template&id=5b09146b&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport DataTableStyle from 'primevue/datatable/style';\n\nexport default {\n    name: 'BaseDataTable',\n    extends: BaseComponent,\n    props: {\n        value: {\n            type: Array,\n            default: null\n        },\n        dataKey: {\n            type: [String, Function],\n            default: null\n        },\n        rows: {\n            type: Number,\n            default: 0\n        },\n        first: {\n            type: Number,\n            default: 0\n        },\n        totalRecords: {\n            type: Number,\n            default: 0\n        },\n        paginator: {\n            type: Boolean,\n            default: false\n        },\n        paginatorPosition: {\n            type: String,\n            default: 'bottom'\n        },\n        alwaysShowPaginator: {\n            type: Boolean,\n            default: true\n        },\n        paginatorTemplate: {\n            type: [Object, String],\n            default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'\n        },\n        pageLinkSize: {\n            type: Number,\n            default: 5\n        },\n        rowsPerPageOptions: {\n            type: Array,\n            default: null\n        },\n        currentPageReportTemplate: {\n            type: String,\n            default: '({currentPage} of {totalPages})'\n        },\n        lazy: {\n            type: Boolean,\n            default: false\n        },\n        loading: {\n            type: Boolean,\n            default: false\n        },\n        loadingIcon: {\n            type: String,\n            default: undefined\n        },\n        sortField: {\n            type: [String, Function],\n            default: null\n        },\n        sortOrder: {\n            type: Number,\n            default: null\n        },\n        defaultSortOrder: {\n            type: Number,\n            default: 1\n        },\n        nullSortOrder: {\n            type: Number,\n            default: 1\n        },\n        multiSortMeta: {\n            type: Array,\n            default: null\n        },\n        sortMode: {\n            type: String,\n            default: 'single'\n        },\n        removableSort: {\n            type: Boolean,\n            default: false\n        },\n        filters: {\n            type: Object,\n            default: null\n        },\n        filterDisplay: {\n            type: String,\n            default: null\n        },\n        globalFilterFields: {\n            type: Array,\n            default: null\n        },\n        filterLocale: {\n            type: String,\n            default: undefined\n        },\n        selection: {\n            type: [Array, Object],\n            default: null\n        },\n        selectionMode: {\n            type: String,\n            default: null\n        },\n        compareSelectionBy: {\n            type: String,\n            default: 'deepEquals'\n        },\n        metaKeySelection: {\n            type: Boolean,\n            default: false\n        },\n        contextMenu: {\n            type: Boolean,\n            default: false\n        },\n        contextMenuSelection: {\n            type: Object,\n            default: null\n        },\n        selectAll: {\n            type: Boolean,\n            default: null\n        },\n        rowHover: {\n            type: Boolean,\n            default: false\n        },\n        csvSeparator: {\n            type: String,\n            default: ','\n        },\n        exportFilename: {\n            type: String,\n            default: 'download'\n        },\n        exportFunction: {\n            type: Function,\n            default: null\n        },\n        resizableColumns: {\n            type: Boolean,\n            default: false\n        },\n        columnResizeMode: {\n            type: String,\n            default: 'fit'\n        },\n        reorderableColumns: {\n            type: Boolean,\n            default: false\n        },\n        expandedRows: {\n            type: [Array, Object],\n            default: null\n        },\n        expandedRowIcon: {\n            type: String,\n            default: undefined\n        },\n        collapsedRowIcon: {\n            type: String,\n            default: undefined\n        },\n        rowGroupMode: {\n            type: String,\n            default: null\n        },\n        groupRowsBy: {\n            type: [Array, String, Function],\n            default: null\n        },\n        expandableRowGroups: {\n            type: Boolean,\n            default: false\n        },\n        expandedRowGroups: {\n            type: Array,\n            default: null\n        },\n        stateStorage: {\n            type: String,\n            default: 'session'\n        },\n        stateKey: {\n            type: String,\n            default: null\n        },\n        editMode: {\n            type: String,\n            default: null\n        },\n        editingRows: {\n            type: Array,\n            default: null\n        },\n        rowClass: {\n            type: Function,\n            default: null\n        },\n        rowStyle: {\n            type: Function,\n            default: null\n        },\n        scrollable: {\n            type: Boolean,\n            default: false\n        },\n        virtualScrollerOptions: {\n            type: Object,\n            default: null\n        },\n        scrollHeight: {\n            type: String,\n            default: null\n        },\n        frozenValue: {\n            type: Array,\n            default: null\n        },\n        breakpoint: {\n            type: String,\n            default: '960px'\n        },\n        showHeaders: {\n            type: Boolean,\n            default: true\n        },\n        showGridlines: {\n            type: Boolean,\n            default: false\n        },\n        stripedRows: {\n            type: Boolean,\n            default: false\n        },\n        highlightOnSelect: {\n            type: Boolean,\n            default: false\n        },\n        size: {\n            type: String,\n            default: null\n        },\n        tableStyle: {\n            type: null,\n            default: null\n        },\n        tableClass: {\n            type: [String, Object],\n            default: null\n        },\n        tableProps: {\n            type: Object,\n            default: null\n        },\n        filterInputProps: {\n            type: null,\n            default: null\n        },\n        filterButtonProps: {\n            type: Object,\n            default() {\n                return {\n                    filter: { severity: 'secondary', text: true, rounded: true },\n                    inline: {\n                        clear: { severity: 'secondary', text: true, rounded: true }\n                    },\n                    popover: {\n                        addRule: { severity: 'info', text: true, size: 'small' },\n                        removeRule: { severity: 'danger', text: true, size: 'small' },\n                        apply: { size: 'small' },\n                        clear: { outlined: true, size: 'small' }\n                    }\n                };\n            }\n        },\n        editButtonProps: {\n            type: Object,\n            default() {\n                return {\n                    init: { severity: 'secondary', text: true, rounded: true },\n                    save: { severity: 'secondary', text: true, rounded: true },\n                    cancel: { severity: 'secondary', text: true, rounded: true }\n                };\n            }\n        }\n    },\n    style: DataTableStyle,\n    provide() {\n        return {\n            $pcDataTable: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <Checkbox :modelValue=\"checked\" :binary=\"true\" :disabled=\"$attrs.disabled\" :aria-label=\"checkboxAriaLabel\" @change=\"onChange\" :unstyled=\"unstyled\" :pt=\"getColumnPT('pcRowCheckbox')\">\n        <template #icon=\"slotProps\">\n            <component v-if=\"rowCheckboxIconTemplate\" :is=\"rowCheckboxIconTemplate\" :checked=\"slotProps.checked\" :class=\"slotProps.class\" />\n            <CheckIcon v-else-if=\"!rowCheckboxIconTemplate && slotProps.checked\" :class=\"slotProps.class\" v-bind=\"getColumnPT('pcRowCheckbox.icon')\" />\n        </template>\n    </Checkbox>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport CheckIcon from '@primevue/icons/check';\nimport Checkbox from 'primevue/checkbox';\nimport { mergeProps } from 'vue';\n\nexport default {\n    name: 'RowCheckbox',\n    hostName: 'DataTable',\n    extends: BaseComponent,\n    emits: ['change'],\n    props: {\n        value: null,\n        checked: null,\n        column: null,\n        rowCheckboxIconTemplate: {\n            type: Function,\n            default: null\n        },\n        index: {\n            type: Number,\n            default: null\n        }\n    },\n    methods: {\n        getColumnPT(key) {\n            const columnMetaData = {\n                props: this.column.props,\n                parent: {\n                    instance: this,\n                    props: this.$props,\n                    state: this.$data\n                },\n                context: {\n                    index: this.index,\n                    checked: this.checked,\n                    disabled: this.$attrs.disabled\n                }\n            };\n\n            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));\n        },\n        getColumnProp() {\n            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:\n        },\n        onChange(event) {\n            if (!this.$attrs.disabled) {\n                this.$emit('change', {\n                    originalEvent: event,\n                    data: this.value\n                });\n            }\n        }\n    },\n    computed: {\n        checkboxAriaLabel() {\n            return this.$primevue.config.locale.aria ? (this.checked ? this.$primevue.config.locale.aria.selectRow : this.$primevue.config.locale.aria.unselectRow) : undefined;\n        }\n    },\n    components: {\n        CheckIcon,\n        Checkbox\n    }\n};\n</script>\n","<template>\n    <Checkbox :modelValue=\"checked\" :binary=\"true\" :disabled=\"$attrs.disabled\" :aria-label=\"checkboxAriaLabel\" @change=\"onChange\" :unstyled=\"unstyled\" :pt=\"getColumnPT('pcRowCheckbox')\">\n        <template #icon=\"slotProps\">\n            <component v-if=\"rowCheckboxIconTemplate\" :is=\"rowCheckboxIconTemplate\" :checked=\"slotProps.checked\" :class=\"slotProps.class\" />\n            <CheckIcon v-else-if=\"!rowCheckboxIconTemplate && slotProps.checked\" :class=\"slotProps.class\" v-bind=\"getColumnPT('pcRowCheckbox.icon')\" />\n        </template>\n    </Checkbox>\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport CheckIcon from '@primevue/icons/check';\nimport Checkbox from 'primevue/checkbox';\nimport { mergeProps } from 'vue';\n\nexport default {\n    name: 'RowCheckbox',\n    hostName: 'DataTable',\n    extends: BaseComponent,\n    emits: ['change'],\n    props: {\n        value: null,\n        checked: null,\n        column: null,\n        rowCheckboxIconTemplate: {\n            type: Function,\n            default: null\n        },\n        index: {\n            type: Number,\n            default: null\n        }\n    },\n    methods: {\n        getColumnPT(key) {\n            const columnMetaData = {\n                props: this.column.props,\n                parent: {\n                    instance: this,\n                    props: this.$props,\n                    state: this.$data\n                },\n                context: {\n                    index: this.index,\n                    checked: this.checked,\n                    disabled: this.$attrs.disabled\n                }\n            };\n\n            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));\n        },\n        getColumnProp() {\n            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:\n        },\n        onChange(event) {\n            if (!this.$attrs.disabled) {\n                this.$emit('change', {\n                    originalEvent: event,\n                    data: this.value\n                });\n            }\n        }\n    },\n    computed: {\n        checkboxAriaLabel() {\n            return this.$primevue.config.locale.aria ? (this.checked ? this.$primevue.config.locale.aria.selectRow : this.$primevue.config.locale.aria.unselectRow) : undefined;\n        }\n    },\n    components: {\n        CheckIcon,\n        Checkbox\n    }\n};\n</script>\n","<template>\n    <RadioButton :modelValue=\"checked\" :binary=\"true\" :disabled=\"$attrs.disabled\" :name=\"name\" @change=\"onChange\" :unstyled=\"unstyled\" :pt=\"getColumnPT('pcRowRadiobutton')\" />\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport RadioButton from 'primevue/radiobutton';\nimport { mergeProps } from 'vue';\n\nexport default {\n    name: 'RowRadioButton',\n    hostName: 'DataTable',\n    extends: BaseComponent,\n    emits: ['change'],\n    props: {\n        value: null,\n        checked: null,\n        name: null,\n        column: null,\n        index: {\n            type: Number,\n            default: null\n        }\n    },\n    methods: {\n        getColumnPT(key) {\n            const columnMetaData = {\n                props: this.column.props,\n                parent: {\n                    instance: this,\n                    props: this.$props,\n                    state: this.$data\n                },\n                context: {\n                    index: this.index,\n                    checked: this.checked,\n                    disabled: this.$attrs.disabled\n                }\n            };\n\n            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));\n        },\n        getColumnProp() {\n            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:\n        },\n        onChange(event) {\n            if (!this.$attrs.disabled) {\n                this.$emit('change', {\n                    originalEvent: event,\n                    data: this.value\n                });\n            }\n        }\n    },\n    components: {\n        RadioButton\n    }\n};\n</script>\n","<template>\n    <RadioButton :modelValue=\"checked\" :binary=\"true\" :disabled=\"$attrs.disabled\" :name=\"name\" @change=\"onChange\" :unstyled=\"unstyled\" :pt=\"getColumnPT('pcRowRadiobutton')\" />\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport RadioButton from 'primevue/radiobutton';\nimport { mergeProps } from 'vue';\n\nexport default {\n    name: 'RowRadioButton',\n    hostName: 'DataTable',\n    extends: BaseComponent,\n    emits: ['change'],\n    props: {\n        value: null,\n        checked: null,\n        name: null,\n        column: null,\n        index: {\n            type: Number,\n            default: null\n        }\n    },\n    methods: {\n        getColumnPT(key) {\n            const columnMetaData = {\n                props: this.column.props,\n                parent: {\n                    instance: this,\n                    props: this.$props,\n                    state: this.$data\n                },\n                context: {\n                    index: this.index,\n                    checked: this.checked,\n                    disabled: this.$attrs.disabled\n                }\n            };\n\n            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));\n        },\n        getColumnProp() {\n            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:\n        },\n        onChange(event) {\n            if (!this.$attrs.disabled) {\n                this.$emit('change', {\n                    originalEvent: event,\n                    data: this.value\n                });\n            }\n        }\n    },\n    components: {\n        RadioButton\n    }\n};\n</script>\n","<template>\n    <td v-if=\"loading\" :style=\"containerStyle\" :class=\"containerClass\" role=\"cell\" v-bind=\"{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }\">\n        <component :is=\"column.children.loading\" :data=\"rowData\" :column=\"column\" :field=\"field\" :index=\"rowIndex\" :frozenRow=\"frozenRow\" :loadingOptions=\"loadingOptions\" />\n    </td>\n    <td\n        v-else\n        :style=\"containerStyle\"\n        :class=\"containerClass\"\n        :colspan=\"columnProp('colspan')\"\n        :rowspan=\"columnProp('rowspan')\"\n        @click=\"onClick\"\n        @keydown=\"onKeyDown\"\n        role=\"cell\"\n        v-bind=\"{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }\"\n        :data-p-selection-column=\"columnProp('selectionMode') != null\"\n        :data-p-editable-column=\"isEditable()\"\n        :data-p-cell-editing=\"d_editing\"\n        :data-p-frozen-column=\"columnProp('frozen')\"\n    >\n        <component\n            v-if=\"column.children && column.children.body && !d_editing\"\n            :is=\"column.children.body\"\n            :data=\"rowData\"\n            :column=\"column\"\n            :field=\"field\"\n            :index=\"rowIndex\"\n            :frozenRow=\"frozenRow\"\n            :editorInitCallback=\"editorInitCallback\"\n            :rowTogglerCallback=\"toggleRow\"\n        />\n        <component\n            v-else-if=\"column.children && column.children.editor && d_editing\"\n            :is=\"column.children.editor\"\n            :data=\"editingRowData\"\n            :column=\"column\"\n            :field=\"field\"\n            :index=\"rowIndex\"\n            :frozenRow=\"frozenRow\"\n            :editorSaveCallback=\"editorSaveCallback\"\n            :editorCancelCallback=\"editorCancelCallback\"\n        />\n        <component v-else-if=\"column.children && column.children.body && !column.children.editor && d_editing\" :is=\"column.children.body\" :data=\"editingRowData\" :column=\"column\" :field=\"field\" :index=\"rowIndex\" :frozenRow=\"frozenRow\" />\n        <template v-else-if=\"columnProp('selectionMode')\">\n            <DTRadioButton v-if=\"columnProp('selectionMode') === 'single'\" :value=\"rowData\" :name=\"name\" :checked=\"selected\" @change=\"toggleRowWithRadio($event, rowIndex)\" :column=\"column\" :index=\"index\" :unstyled=\"unstyled\" :pt=\"pt\" />\n            <DTCheckbox\n                v-else-if=\"columnProp('selectionMode') === 'multiple'\"\n                :value=\"rowData\"\n                :checked=\"selected\"\n                :rowCheckboxIconTemplate=\"column.children && column.children.rowcheckboxicon\"\n                :aria-selected=\"selected ? true : undefined\"\n                @change=\"toggleRowWithCheckbox($event, rowIndex)\"\n                :column=\"column\"\n                :index=\"index\"\n                :unstyled=\"unstyled\"\n                :pt=\"pt\"\n            />\n        </template>\n        <template v-else-if=\"columnProp('rowReorder')\">\n            <component v-if=\"column.children && column.children.rowreordericon\" :is=\"column.children.rowreordericon\" :class=\"cx('reorderableRowHandle')\" />\n            <i v-else-if=\"columnProp('rowReorderIcon')\" :class=\"[cx('reorderableRowHandle'), columnProp('rowReorderIcon')]\" v-bind=\"getColumnPT('reorderableRowHandle')\" />\n            <BarsIcon v-else :class=\"cx('reorderableRowHandle')\" v-bind=\"getColumnPT('reorderableRowHandle')\" />\n        </template>\n        <template v-else-if=\"columnProp('expander')\">\n            <button\n                v-ripple\n                :class=\"cx('rowToggleButton')\"\n                type=\"button\"\n                :aria-expanded=\"isRowExpanded\"\n                :aria-controls=\"ariaControls\"\n                :aria-label=\"expandButtonAriaLabel\"\n                @click=\"toggleRow\"\n                data-p-selected=\"selected\"\n                v-bind=\"getColumnPT('rowToggleButton')\"\n                data-pc-group-section=\"rowactionbutton\"\n            >\n                <component v-if=\"column.children && column.children.rowtoggleicon\" :is=\"column.children.rowtoggleicon\" :class=\"cx('rowToggleIcon')\" :rowExpanded=\"isRowExpanded\" />\n                <!-- TODO: Deprecated since v4.0-->\n                <component v-else-if=\"column.children && column.children.rowtogglericon\" :is=\"column.children.rowtogglericon\" :class=\"cx('rowToggleIcon')\" :rowExpanded=\"isRowExpanded\" />\n                <template v-else>\n                    <span v-if=\"isRowExpanded && expandedRowIcon\" :class=\"[cx('rowToggleIcon'), expandedRowIcon]\" />\n                    <ChevronDownIcon v-else-if=\"isRowExpanded && !expandedRowIcon\" :class=\"cx('rowToggleIcon')\" v-bind=\"getColumnPT('rowToggleIcon')\" />\n                    <span v-else-if=\"!isRowExpanded && collapsedRowIcon\" :class=\"[cx('rowToggleIcon'), collapsedRowIcon]\" />\n                    <ChevronRightIcon v-else-if=\"!isRowExpanded && !collapsedRowIcon\" :class=\"cx('rowToggleIcon')\" v-bind=\"getColumnPT('rowToggleIcon')\" />\n                </template>\n            </button>\n        </template>\n        <template v-else-if=\"editMode === 'row' && columnProp('rowEditor')\">\n            <Button\n                v-if=\"!d_editing\"\n                :class=\"cx('pcRowEditorInit')\"\n                :aria-label=\"initButtonAriaLabel\"\n                :unstyled=\"unstyled\"\n                @click=\"onRowEditInit\"\n                v-bind=\"editButtonProps.init\"\n                :pt=\"getColumnPT('pcRowEditorInit')\"\n                data-pc-group-section=\"rowactionbutton\"\n            >\n                <template #icon=\"slotProps\">\n                    <component :is=\"(column.children && column.children.roweditoriniticon) || 'PencilIcon'\" :class=\"slotProps.class\" v-bind=\"getColumnPT('pcRowEditorInit')['icon']\" />\n                </template>\n            </Button>\n            <Button\n                v-if=\"d_editing\"\n                :class=\"cx('pcRowEditorSave')\"\n                :aria-label=\"saveButtonAriaLabel\"\n                :unstyled=\"unstyled\"\n                @click=\"onRowEditSave\"\n                v-bind=\"editButtonProps.save\"\n                :pt=\"getColumnPT('pcRowEditorSave')\"\n                data-pc-group-section=\"rowactionbutton\"\n            >\n                <template #icon=\"slotProps\">\n                    <component :is=\"(column.children && column.children.roweditorsaveicon) || 'CheckIcon'\" :class=\"slotProps.class\" v-bind=\"getColumnPT('pcRowEditorSave')['icon']\" />\n                </template>\n            </Button>\n            <Button\n                v-if=\"d_editing\"\n                :class=\"cx('pcRowEditorCancel')\"\n                :aria-label=\"cancelButtonAriaLabel\"\n                :unstyled=\"unstyled\"\n                @click=\"onRowEditCancel\"\n                v-bind=\"editButtonProps.cancel\"\n                :pt=\"getColumnPT('pcRowEditorCancel')\"\n                data-pc-group-section=\"rowactionbutton\"\n            >\n                <template #icon=\"slotProps\">\n                    <component :is=\"(column.children && column.children.roweditorcancelicon) || 'TimesIcon'\" :class=\"slotProps.class\" v-bind=\"getColumnPT('pcRowEditorCancel')['icon']\" />\n                </template>\n            </Button>\n        </template>\n        <template v-else>{{ resolveFieldData() }}</template>\n    </td>\n</template>\n\n<script>\nimport { getAttribute, getFirstFocusableElement, getNextElementSibling, getOuterWidth, getPreviousElementSibling, invokeElementMethod } from '@primeuix/utils/dom';\nimport { resolveFieldData } from '@primeuix/utils/object';\nimport BaseComponent from '@primevue/core/basecomponent';\nimport { getVNodeProp } from '@primevue/core/utils';\nimport BarsIcon from '@primevue/icons/bars';\nimport CheckIcon from '@primevue/icons/check';\nimport ChevronDownIcon from '@primevue/icons/chevrondown';\nimport ChevronRightIcon from '@primevue/icons/chevronright';\nimport PencilIcon from '@primevue/icons/pencil';\nimport TimesIcon from '@primevue/icons/times';\nimport Button from 'primevue/button';\nimport OverlayEventBus from 'primevue/overlayeventbus';\nimport Ripple from 'primevue/ripple';\nimport { mergeProps } from 'vue';\nimport RowCheckbox from './RowCheckbox.vue';\nimport RowRadioButton from './RowRadioButton.vue';\n\nexport default {\n    name: 'BodyCell',\n    hostName: 'DataTable',\n    extends: BaseComponent,\n    emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'row-toggle', 'radio-change', 'checkbox-change', 'editing-meta-change'],\n    props: {\n        rowData: {\n            type: Object,\n            default: null\n        },\n        column: {\n            type: Object,\n            default: null\n        },\n        frozenRow: {\n            type: Boolean,\n            default: false\n        },\n        rowIndex: {\n            type: Number,\n            default: null\n        },\n        index: {\n            type: Number,\n            default: null\n        },\n        isRowExpanded: {\n            type: Boolean,\n            default: false\n        },\n        selected: {\n            type: Boolean,\n            default: false\n        },\n        editing: {\n            type: Boolean,\n            default: false\n        },\n        editingMeta: {\n            type: Object,\n            default: null\n        },\n        editMode: {\n            type: String,\n            default: null\n        },\n        virtualScrollerContentProps: {\n            type: Object,\n            default: null\n        },\n        ariaControls: {\n            type: String,\n            default: null\n        },\n        name: {\n            type: String,\n            default: null\n        },\n        expandedRowIcon: {\n            type: String,\n            default: null\n        },\n        collapsedRowIcon: {\n            type: String,\n            default: null\n        },\n        editButtonProps: {\n            type: Object,\n            default: null\n        }\n    },\n    documentEditListener: null,\n    selfClick: false,\n    overlayEventListener: null,\n    editCompleteTimeout: null,\n    data() {\n        return {\n            d_editing: this.editing,\n            styleObject: {}\n        };\n    },\n    watch: {\n        editing(newValue) {\n            this.d_editing = newValue;\n        },\n        '$data.d_editing': function (newValue) {\n            this.$emit('editing-meta-change', { data: this.rowData, field: this.field || `field_${this.index}`, index: this.rowIndex, editing: newValue });\n        }\n    },\n    mounted() {\n        if (this.columnProp('frozen')) {\n            this.updateStickyPosition();\n        }\n    },\n    updated() {\n        if (this.columnProp('frozen')) {\n            this.updateStickyPosition();\n        }\n\n        if (this.d_editing && (this.editMode === 'cell' || (this.editMode === 'row' && this.columnProp('rowEditor')))) {\n            setTimeout(() => {\n                const focusableEl = getFirstFocusableElement(this.$el);\n\n                focusableEl && focusableEl.focus();\n            }, 1);\n        }\n    },\n    beforeUnmount() {\n        if (this.overlayEventListener) {\n            OverlayEventBus.off('overlay-click', this.overlayEventListener);\n            this.overlayEventListener = null;\n        }\n    },\n    methods: {\n        columnProp(prop) {\n            return getVNodeProp(this.column, prop);\n        },\n        getColumnPT(key) {\n            const columnMetaData = {\n                props: this.column.props,\n                parent: {\n                    instance: this,\n                    props: this.$props,\n                    state: this.$data\n                },\n                context: {\n                    index: this.index,\n                    size: this.$parentInstance?.$parentInstance?.size,\n                    showGridlines: this.$parentInstance?.$parentInstance?.showGridlines\n                }\n            };\n\n            return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));\n        },\n        getColumnProp() {\n            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;\n        },\n        resolveFieldData() {\n            return resolveFieldData(this.rowData, this.field);\n        },\n        toggleRow(event) {\n            this.$emit('row-toggle', {\n                originalEvent: event,\n                data: this.rowData\n            });\n        },\n        toggleRowWithRadio(event, index) {\n            this.$emit('radio-change', { originalEvent: event.originalEvent, index: index, data: event.data });\n        },\n        toggleRowWithCheckbox(event, index) {\n            this.$emit('checkbox-change', { originalEvent: event.originalEvent, index: index, data: event.data });\n        },\n        isEditable() {\n            return this.column.children && this.column.children.editor != null;\n        },\n        bindDocumentEditListener() {\n            if (!this.documentEditListener) {\n                this.documentEditListener = (event) => {\n                    this.selfClick = this.$el && this.$el.contains(event.target);\n\n                    if (this.editCompleteTimeout) {\n                        clearTimeout(this.editCompleteTimeout);\n                    }\n\n                    if (!this.selfClick) {\n                        this.editCompleteTimeout = setTimeout(() => {\n                            this.completeEdit(event, 'outside');\n                        }, 1);\n                    }\n                };\n\n                document.addEventListener('mousedown', this.documentEditListener);\n            }\n        },\n        unbindDocumentEditListener() {\n            if (this.documentEditListener) {\n                document.removeEventListener('mousedown', this.documentEditListener);\n                this.documentEditListener = null;\n                this.selfClick = false;\n\n                if (this.editCompleteTimeout) {\n                    clearTimeout(this.editCompleteTimeout);\n                    this.editCompleteTimeout = null;\n                }\n            }\n        },\n        switchCellToViewMode() {\n            this.d_editing = false;\n            this.unbindDocumentEditListener();\n            OverlayEventBus.off('overlay-click', this.overlayEventListener);\n            this.overlayEventListener = null;\n        },\n        onClick(event) {\n            if (this.editMode === 'cell' && this.isEditable()) {\n                if (!this.d_editing) {\n                    this.d_editing = true;\n                    this.bindDocumentEditListener();\n                    this.$emit('cell-edit-init', { originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex });\n\n                    this.overlayEventListener = (e) => {\n                        this.selfClick = this.$el && this.$el.contains(e.target);\n                    };\n\n                    OverlayEventBus.on('overlay-click', this.overlayEventListener);\n                }\n            }\n        },\n        completeEdit(event, type) {\n            const completeEvent = {\n                originalEvent: event,\n                data: this.rowData,\n                newData: this.editingRowData,\n                value: this.rowData[this.field],\n                newValue: this.editingRowData[this.field],\n                field: this.field,\n                index: this.rowIndex,\n                type: type,\n                defaultPrevented: false,\n                preventDefault: function () {\n                    this.defaultPrevented = true;\n                }\n            };\n\n            this.$emit('cell-edit-complete', completeEvent);\n\n            if (!completeEvent.defaultPrevented) {\n                this.switchCellToViewMode();\n            }\n        },\n        onKeyDown(event) {\n            if (this.editMode === 'cell') {\n                switch (event.code) {\n                    case 'Enter':\n                    case 'NumpadEnter':\n                        this.completeEdit(event, 'enter');\n                        break;\n\n                    case 'Escape':\n                        this.switchCellToViewMode();\n                        this.$emit('cell-edit-cancel', { originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex });\n                        break;\n\n                    case 'Tab':\n                        this.completeEdit(event, 'tab');\n\n                        if (event.shiftKey) this.moveToPreviousCell(event);\n                        else this.moveToNextCell(event);\n                        break;\n\n                    default:\n                        break;\n                }\n            }\n        },\n        async moveToPreviousCell(event) {\n            let currentCell = this.findCell(event.target);\n            let targetCell = this.findPreviousEditableColumn(currentCell);\n\n            if (targetCell) {\n                await this.$nextTick();\n                invokeElementMethod(targetCell, 'click');\n                event.preventDefault();\n            }\n        },\n        async moveToNextCell(event) {\n            let currentCell = this.findCell(event.target);\n            let targetCell = this.findNextEditableColumn(currentCell);\n\n            if (targetCell) {\n                await this.$nextTick();\n                invokeElementMethod(targetCell, 'click');\n                event.preventDefault();\n            }\n        },\n        findCell(element) {\n            if (element) {\n                let cell = element;\n\n                while (cell && !getAttribute(cell, 'data-p-cell-editing')) {\n                    cell = cell.parentElement;\n                }\n\n                return cell;\n            } else {\n                return null;\n            }\n        },\n        findPreviousEditableColumn(cell) {\n            let prevCell = cell.previousElementSibling;\n\n            if (!prevCell) {\n                let previousRow = cell.parentElement.previousElementSibling;\n\n                if (previousRow) {\n                    prevCell = previousRow.lastElementChild;\n                }\n            }\n\n            if (prevCell) {\n                if (getAttribute(prevCell, 'data-p-editable-column')) return prevCell;\n                else return this.findPreviousEditableColumn(prevCell);\n            } else {\n                return null;\n            }\n        },\n        findNextEditableColumn(cell) {\n            let nextCell = cell.nextElementSibling;\n\n            if (!nextCell) {\n                let nextRow = cell.parentElement.nextElementSibling;\n\n                if (nextRow) {\n                    nextCell = nextRow.firstElementChild;\n                }\n            }\n\n            if (nextCell) {\n                if (getAttribute(nextCell, 'data-p-editable-column')) return nextCell;\n                else return this.findNextEditableColumn(nextCell);\n            } else {\n                return null;\n            }\n        },\n        onRowEditInit(event) {\n            this.$emit('row-edit-init', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });\n        },\n        onRowEditSave(event) {\n            this.$emit('row-edit-save', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });\n        },\n        onRowEditCancel(event) {\n            this.$emit('row-edit-cancel', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });\n        },\n        editorInitCallback(event) {\n            this.$emit('row-edit-init', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });\n        },\n        editorSaveCallback(event) {\n            if (this.editMode === 'row') {\n                this.$emit('row-edit-save', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });\n            } else {\n                this.completeEdit(event, 'enter');\n            }\n        },\n        editorCancelCallback(event) {\n            if (this.editMode === 'row') {\n                this.$emit('row-edit-cancel', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });\n            } else {\n                this.switchCellToViewMode();\n                this.$emit('cell-edit-cancel', { originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex });\n            }\n        },\n        updateStickyPosition() {\n            if (this.columnProp('frozen')) {\n                let align = this.columnProp('alignFrozen');\n\n                if (align === 'right') {\n                    let pos = 0;\n                    let next = getNextElementSibling(this.$el, '[data-p-frozen-column=\"true\"]');\n\n                    if (next) {\n                        pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0);\n                    }\n\n                    this.styleObject.insetInlineEnd = pos + 'px';\n                } else {\n                    let pos = 0;\n                    let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column=\"true\"]');\n\n                    if (prev) {\n                        pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0);\n                    }\n\n                    this.styleObject.insetInlineStart = pos + 'px';\n                }\n            }\n        },\n        getVirtualScrollerProp(option) {\n            return this.virtualScrollerContentProps ? this.virtualScrollerContentProps[option] : null;\n        }\n    },\n    computed: {\n        editingRowData() {\n            return this.editingMeta[this.rowIndex] ? this.editingMeta[this.rowIndex].data : this.rowData;\n        },\n        field() {\n            return this.columnProp('field');\n        },\n        containerClass() {\n            return [this.columnProp('bodyClass'), this.columnProp('class'), this.cx('bodyCell')];\n        },\n        containerStyle() {\n            let bodyStyle = this.columnProp('bodyStyle');\n            let columnStyle = this.columnProp('style');\n\n            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];\n        },\n        loading() {\n            return this.getVirtualScrollerProp('loading');\n        },\n        loadingOptions() {\n            const getLoaderOptions = this.getVirtualScrollerProp('getLoaderOptions');\n\n            return (\n                getLoaderOptions &&\n                getLoaderOptions(this.rowIndex, {\n                    cellIndex: this.index,\n                    cellFirst: this.index === 0,\n                    cellLast: this.index === this.getVirtualScrollerProp('columns').length - 1,\n                    cellEven: this.index % 2 === 0,\n                    cellOdd: this.index % 2 !== 0,\n                    column: this.column,\n                    field: this.field\n                })\n            );\n        },\n        expandButtonAriaLabel() {\n            return this.$primevue.config.locale.aria ? (this.isRowExpanded ? this.$primevue.config.locale.aria.expandRow : this.$primevue.config.locale.aria.collapseRow) : undefined;\n        },\n        initButtonAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.editRow : undefined;\n        },\n        saveButtonAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.saveEdit : undefined;\n        },\n        cancelButtonAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.cancelEdit : undefined;\n        }\n    },\n    components: {\n        DTRadioButton: RowRadioButton,\n        DTCheckbox: RowCheckbox,\n        Button,\n        ChevronDownIcon,\n        ChevronRightIcon,\n        BarsIcon,\n        PencilIcon,\n        CheckIcon,\n        TimesIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <td v-if=\"loading\" :style=\"containerStyle\" :class=\"containerClass\" role=\"cell\" v-bind=\"{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }\">\n        <component :is=\"column.children.loading\" :data=\"rowData\" :column=\"column\" :field=\"field\" :index=\"rowIndex\" :frozenRow=\"frozenRow\" :loadingOptions=\"loadingOptions\" />\n    </td>\n    <td\n        v-else\n        :style=\"containerStyle\"\n        :class=\"containerClass\"\n        :colspan=\"columnProp('colspan')\"\n        :rowspan=\"columnProp('rowspan')\"\n        @click=\"onClick\"\n        @keydown=\"onKeyDown\"\n        role=\"cell\"\n        v-bind=\"{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }\"\n        :data-p-selection-column=\"columnProp('selectionMode') != null\"\n        :data-p-editable-column=\"isEditable()\"\n        :data-p-cell-editing=\"d_editing\"\n        :data-p-frozen-column=\"columnProp('frozen')\"\n    >\n        <component\n            v-if=\"column.children && column.children.body && !d_editing\"\n            :is=\"column.children.body\"\n            :data=\"rowData\"\n            :column=\"column\"\n            :field=\"field\"\n            :index=\"rowIndex\"\n            :frozenRow=\"frozenRow\"\n            :editorInitCallback=\"editorInitCallback\"\n            :rowTogglerCallback=\"toggleRow\"\n        />\n        <component\n            v-else-if=\"column.children && column.children.editor && d_editing\"\n            :is=\"column.children.editor\"\n            :data=\"editingRowData\"\n            :column=\"column\"\n            :field=\"field\"\n            :index=\"rowIndex\"\n            :frozenRow=\"frozenRow\"\n            :editorSaveCallback=\"editorSaveCallback\"\n            :editorCancelCallback=\"editorCancelCallback\"\n        />\n        <component v-else-if=\"column.children && column.children.body && !column.children.editor && d_editing\" :is=\"column.children.body\" :data=\"editingRowData\" :column=\"column\" :field=\"field\" :index=\"rowIndex\" :frozenRow=\"frozenRow\" />\n        <template v-else-if=\"columnProp('selectionMode')\">\n            <DTRadioButton v-if=\"columnProp('selectionMode') === 'single'\" :value=\"rowData\" :name=\"name\" :checked=\"selected\" @change=\"toggleRowWithRadio($event, rowIndex)\" :column=\"column\" :index=\"index\" :unstyled=\"unstyled\" :pt=\"pt\" />\n            <DTCheckbox\n                v-else-if=\"columnProp('selectionMode') === 'multiple'\"\n                :value=\"rowData\"\n                :checked=\"selected\"\n                :rowCheckboxIconTemplate=\"column.children && column.children.rowcheckboxicon\"\n                :aria-selected=\"selected ? true : undefined\"\n                @change=\"toggleRowWithCheckbox($event, rowIndex)\"\n                :column=\"column\"\n                :index=\"index\"\n                :unstyled=\"unstyled\"\n                :pt=\"pt\"\n            />\n        </template>\n        <template v-else-if=\"columnProp('rowReorder')\">\n            <component v-if=\"column.children && column.children.rowreordericon\" :is=\"column.children.rowreordericon\" :class=\"cx('reorderableRowHandle')\" />\n            <i v-else-if=\"columnProp('rowReorderIcon')\" :class=\"[cx('reorderableRowHandle'), columnProp('rowReorderIcon')]\" v-bind=\"getColumnPT('reorderableRowHandle')\" />\n            <BarsIcon v-else :class=\"cx('reorderableRowHandle')\" v-bind=\"getColumnPT('reorderableRowHandle')\" />\n        </template>\n        <template v-else-if=\"columnProp('expander')\">\n            <button\n                v-ripple\n                :class=\"cx('rowToggleButton')\"\n                type=\"button\"\n                :aria-expanded=\"isRowExpanded\"\n                :aria-controls=\"ariaControls\"\n                :aria-label=\"expandButtonAriaLabel\"\n                @click=\"toggleRow\"\n                data-p-selected=\"selected\"\n                v-bind=\"getColumnPT('rowToggleButton')\"\n                data-pc-group-section=\"rowactionbutton\"\n            >\n                <component v-if=\"column.children && column.children.rowtoggleicon\" :is=\"column.children.rowtoggleicon\" :class=\"cx('rowToggleIcon')\" :rowExpanded=\"isRowExpanded\" />\n                <!-- TODO: Deprecated since v4.0-->\n                <component v-else-if=\"column.children && column.children.rowtogglericon\" :is=\"column.children.rowtogglericon\" :class=\"cx('rowToggleIcon')\" :rowExpanded=\"isRowExpanded\" />\n                <template v-else>\n                    <span v-if=\"isRowExpanded && expandedRowIcon\" :class=\"[cx('rowToggleIcon'), expandedRowIcon]\" />\n                    <ChevronDownIcon v-else-if=\"isRowExpanded && !expandedRowIcon\" :class=\"cx('rowToggleIcon')\" v-bind=\"getColumnPT('rowToggleIcon')\" />\n                    <span v-else-if=\"!isRowExpanded && collapsedRowIcon\" :class=\"[cx('rowToggleIcon'), collapsedRowIcon]\" />\n                    <ChevronRightIcon v-else-if=\"!isRowExpanded && !collapsedRowIcon\" :class=\"cx('rowToggleIcon')\" v-bind=\"getColumnPT('rowToggleIcon')\" />\n                </template>\n            </button>\n        </template>\n        <template v-else-if=\"editMode === 'row' && columnProp('rowEditor')\">\n            <Button\n                v-if=\"!d_editing\"\n                :class=\"cx('pcRowEditorInit')\"\n                :aria-label=\"initButtonAriaLabel\"\n                :unstyled=\"unstyled\"\n                @click=\"onRowEditInit\"\n                v-bind=\"editButtonProps.init\"\n                :pt=\"getColumnPT('pcRowEditorInit')\"\n                data-pc-group-section=\"rowactionbutton\"\n            >\n                <template #icon=\"slotProps\">\n                    <component :is=\"(column.children && column.children.roweditoriniticon) || 'PencilIcon'\" :class=\"slotProps.class\" v-bind=\"getColumnPT('pcRowEditorInit')['icon']\" />\n                </template>\n            </Button>\n            <Button\n                v-if=\"d_editing\"\n                :class=\"cx('pcRowEditorSave')\"\n                :aria-label=\"saveButtonAriaLabel\"\n                :unstyled=\"unstyled\"\n                @click=\"onRowEditSave\"\n                v-bind=\"editButtonProps.save\"\n                :pt=\"getColumnPT('pcRowEditorSave')\"\n                data-pc-group-section=\"rowactionbutton\"\n            >\n                <template #icon=\"slotProps\">\n                    <component :is=\"(column.children && column.children.roweditorsaveicon) || 'CheckIcon'\" :class=\"slotProps.class\" v-bind=\"getColumnPT('pcRowEditorSave')['icon']\" />\n                </template>\n            </Button>\n            <Button\n                v-if=\"d_editing\"\n                :class=\"cx('pcRowEditorCancel')\"\n                :aria-label=\"cancelButtonAriaLabel\"\n                :unstyled=\"unstyled\"\n                @click=\"onRowEditCancel\"\n                v-bind=\"editButtonProps.cancel\"\n                :pt=\"getCo