primevue 3.28.0 → 3.29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/autocomplete/AutoComplete.d.ts +153 -1
- package/autocomplete/AutoComplete.vue +46 -17
- package/autocomplete/autocomplete.cjs.js +80 -74
- package/autocomplete/autocomplete.cjs.min.js +1 -1
- package/autocomplete/autocomplete.esm.js +80 -75
- package/autocomplete/autocomplete.esm.min.js +1 -1
- package/autocomplete/autocomplete.js +81 -76
- package/autocomplete/autocomplete.min.js +1 -1
- package/basecomponent/BaseComponent.vue +19 -5
- package/basecomponent/basecomponent.cjs.js +19 -5
- package/basecomponent/basecomponent.cjs.min.js +1 -1
- package/basecomponent/basecomponent.esm.js +19 -5
- package/basecomponent/basecomponent.esm.min.js +1 -1
- package/basecomponent/basecomponent.js +20 -7
- package/basecomponent/basecomponent.min.js +1 -1
- package/calendar/Calendar.d.ts +269 -0
- package/calendar/Calendar.vue +75 -59
- package/calendar/calendar.cjs.js +223 -259
- package/calendar/calendar.cjs.min.js +1 -1
- package/calendar/calendar.esm.js +223 -260
- package/calendar/calendar.esm.min.js +1 -1
- package/calendar/calendar.js +224 -261
- package/calendar/calendar.min.js +1 -1
- package/carousel/Carousel.d.ts +154 -0
- package/carousel/Carousel.vue +27 -14
- package/carousel/carousel.cjs.js +64 -65
- package/carousel/carousel.cjs.min.js +1 -1
- package/carousel/carousel.esm.js +64 -66
- package/carousel/carousel.esm.min.js +1 -1
- package/carousel/carousel.js +65 -67
- package/carousel/carousel.min.js +1 -1
- package/cascadeselect/CascadeSelect.d.ts +133 -0
- package/cascadeselect/CascadeSelect.vue +15 -12
- package/cascadeselect/CascadeSelectSub.vue +7 -3
- package/cascadeselect/cascadeselect.cjs.js +63 -66
- package/cascadeselect/cascadeselect.cjs.min.js +1 -1
- package/cascadeselect/cascadeselect.esm.js +63 -67
- package/cascadeselect/cascadeselect.esm.min.js +1 -1
- package/cascadeselect/cascadeselect.js +64 -68
- package/cascadeselect/cascadeselect.min.js +1 -1
- package/checkbox/Checkbox.d.ts +60 -0
- package/checkbox/Checkbox.vue +7 -5
- package/checkbox/checkbox.cjs.js +17 -15
- package/checkbox/checkbox.cjs.min.js +1 -1
- package/checkbox/checkbox.esm.js +17 -16
- package/checkbox/checkbox.esm.min.js +1 -1
- package/checkbox/checkbox.js +18 -17
- package/checkbox/checkbox.min.js +1 -1
- package/chips/Chips.d.ts +80 -0
- package/chips/Chips.vue +9 -5
- package/chips/chips.cjs.js +23 -24
- package/chips/chips.cjs.min.js +1 -1
- package/chips/chips.esm.js +23 -25
- package/chips/chips.esm.min.js +1 -1
- package/chips/chips.js +24 -26
- package/chips/chips.min.js +1 -1
- package/colorpicker/ColorPicker.d.ts +76 -0
- package/colorpicker/ColorPicker.vue +11 -9
- package/colorpicker/colorpicker.cjs.js +28 -27
- package/colorpicker/colorpicker.cjs.min.js +1 -1
- package/colorpicker/colorpicker.esm.js +28 -28
- package/colorpicker/colorpicker.esm.min.js +1 -1
- package/colorpicker/colorpicker.js +29 -29
- package/colorpicker/colorpicker.min.js +1 -1
- package/column/Column.d.ts +303 -2
- package/column/Column.vue +3 -0
- package/column/column.cjs.js +7 -0
- package/column/column.cjs.min.js +1 -1
- package/column/column.esm.js +3 -0
- package/column/column.esm.min.js +1 -1
- package/column/column.js +7 -2
- package/column/column.min.js +1 -1
- package/columngroup/ColumnGroup.d.ts +34 -0
- package/columngroup/ColumnGroup.vue +3 -0
- package/columngroup/columngroup.cjs.js +7 -0
- package/columngroup/columngroup.cjs.min.js +1 -1
- package/columngroup/columngroup.esm.js +3 -0
- package/columngroup/columngroup.esm.min.js +1 -1
- package/columngroup/columngroup.js +7 -2
- package/columngroup/columngroup.min.js +1 -1
- package/config/PrimeVue.d.ts +163 -2
- package/confirmdialog/ConfirmDialog.d.ts +14 -7
- package/contextmenu/ContextMenu.d.ts +1 -1
- package/core/core.js +448 -331
- package/core/core.min.js +9 -9
- package/datatable/BodyCell.vue +29 -13
- package/datatable/ColumnFilter.vue +49 -20
- package/datatable/DataTable.d.ts +188 -1
- package/datatable/DataTable.vue +25 -14
- package/datatable/FooterCell.vue +15 -1
- package/datatable/HeaderCell.vue +31 -6
- package/datatable/HeaderCheckbox.vue +35 -5
- package/datatable/RowCheckbox.vue +36 -5
- package/datatable/RowRadioButton.vue +26 -6
- package/datatable/TableBody.vue +41 -11
- package/datatable/TableFooter.vue +31 -5
- package/datatable/TableHeader.vue +53 -6
- package/datatable/datatable.cjs.js +559 -376
- package/datatable/datatable.cjs.min.js +1 -1
- package/datatable/datatable.esm.js +559 -377
- package/datatable/datatable.esm.min.js +1 -1
- package/datatable/datatable.js +560 -378
- package/datatable/datatable.min.js +1 -1
- package/dataview/DataView.d.ts +72 -0
- package/dataview/DataView.vue +13 -8
- package/dataview/dataview.cjs.js +33 -37
- package/dataview/dataview.cjs.min.js +1 -1
- package/dataview/dataview.esm.js +33 -38
- package/dataview/dataview.esm.min.js +1 -1
- package/dataview/dataview.js +33 -38
- package/dataview/dataview.min.js +1 -1
- package/dataviewlayoutoptions/DataViewLayoutOptions.d.ts +65 -0
- package/dataviewlayoutoptions/DataViewLayoutOptions.vue +7 -5
- package/dataviewlayoutoptions/dataviewlayoutoptions.cjs.js +19 -17
- package/dataviewlayoutoptions/dataviewlayoutoptions.cjs.min.js +1 -1
- package/dataviewlayoutoptions/dataviewlayoutoptions.esm.js +19 -18
- package/dataviewlayoutoptions/dataviewlayoutoptions.esm.min.js +1 -1
- package/dataviewlayoutoptions/dataviewlayoutoptions.js +20 -19
- package/dataviewlayoutoptions/dataviewlayoutoptions.min.js +1 -1
- package/dialog/Dialog.d.ts +6 -4
- package/dialog/Dialog.vue +2 -3
- package/dialog/dialog.cjs.js +4 -5
- package/dialog/dialog.cjs.min.js +1 -1
- package/dialog/dialog.esm.js +4 -5
- package/dialog/dialog.esm.min.js +1 -1
- package/dialog/dialog.js +4 -5
- package/dialog/dialog.min.js +1 -1
- package/dropdown/Dropdown.d.ts +162 -1
- package/dropdown/Dropdown.vue +44 -25
- package/dropdown/dropdown.cjs.js +97 -93
- package/dropdown/dropdown.cjs.min.js +1 -1
- package/dropdown/dropdown.esm.js +97 -94
- package/dropdown/dropdown.esm.min.js +1 -1
- package/dropdown/dropdown.js +98 -95
- package/dropdown/dropdown.min.js +1 -1
- package/editor/Editor.d.ts +67 -0
- package/editor/Editor.vue +35 -33
- package/editor/editor.cjs.js +88 -73
- package/editor/editor.cjs.min.js +1 -1
- package/editor/editor.esm.js +85 -74
- package/editor/editor.esm.min.js +1 -1
- package/editor/editor.js +89 -75
- package/editor/editor.min.js +1 -1
- package/fileupload/FileUpload.d.ts +23 -23
- package/fileupload/FileUpload.vue +3 -3
- package/fileupload/fileupload.cjs.js +4 -4
- package/fileupload/fileupload.cjs.min.js +1 -1
- package/fileupload/fileupload.esm.js +4 -4
- package/fileupload/fileupload.esm.min.js +1 -1
- package/fileupload/fileupload.js +4 -4
- package/fileupload/fileupload.min.js +1 -1
- package/galleria/Galleria.d.ts +196 -0
- package/galleria/Galleria.vue +5 -3
- package/galleria/GalleriaContent.vue +10 -6
- package/galleria/GalleriaItem.vue +12 -9
- package/galleria/GalleriaThumbnails.vue +46 -9
- package/galleria/galleria.cjs.js +106 -104
- package/galleria/galleria.cjs.min.js +1 -1
- package/galleria/galleria.esm.js +106 -105
- package/galleria/galleria.esm.min.js +1 -1
- package/galleria/galleria.js +107 -106
- package/galleria/galleria.min.js +1 -1
- package/image/Image.d.ts +170 -0
- package/image/Image.vue +49 -21
- package/image/image.cjs.js +94 -59
- package/image/image.cjs.min.js +1 -1
- package/image/image.esm.js +94 -60
- package/image/image.esm.min.js +1 -1
- package/image/image.js +95 -61
- package/image/image.min.js +1 -1
- package/inputmask/InputMask.d.ts +25 -0
- package/inputmask/InputMask.vue +3 -1
- package/inputmask/inputmask.cjs.js +9 -3
- package/inputmask/inputmask.cjs.min.js +1 -1
- package/inputmask/inputmask.esm.js +6 -4
- package/inputmask/inputmask.esm.min.js +1 -1
- package/inputmask/inputmask.js +10 -5
- package/inputmask/inputmask.min.js +1 -1
- package/inputnumber/InputNumber.d.ts +69 -0
- package/inputnumber/InputNumber.vue +13 -11
- package/inputnumber/inputnumber.cjs.js +19 -28
- package/inputnumber/inputnumber.cjs.min.js +1 -1
- package/inputnumber/inputnumber.esm.js +19 -29
- package/inputnumber/inputnumber.esm.min.js +1 -1
- package/inputnumber/inputnumber.js +20 -30
- package/inputnumber/inputnumber.min.js +1 -1
- package/inputswitch/InputSwitch.d.ts +51 -0
- package/inputswitch/InputSwitch.vue +7 -4
- package/inputswitch/inputswitch.cjs.js +15 -11
- package/inputswitch/inputswitch.cjs.min.js +1 -1
- package/inputswitch/inputswitch.esm.js +12 -12
- package/inputswitch/inputswitch.esm.min.js +1 -1
- package/inputswitch/inputswitch.js +16 -13
- package/inputswitch/inputswitch.min.js +1 -1
- package/inputtext/InputText.d.ts +25 -0
- package/inputtext/InputText.vue +4 -1
- package/inputtext/inputtext.cjs.js +9 -3
- package/inputtext/inputtext.cjs.min.js +1 -1
- package/inputtext/inputtext.esm.js +6 -4
- package/inputtext/inputtext.esm.min.js +1 -1
- package/inputtext/inputtext.js +10 -5
- package/inputtext/inputtext.min.js +1 -1
- package/knob/Knob.d.ts +78 -0
- package/knob/Knob.vue +8 -4
- package/knob/knob.cjs.js +17 -13
- package/knob/knob.cjs.min.js +1 -1
- package/knob/knob.esm.js +14 -14
- package/knob/knob.esm.min.js +1 -1
- package/knob/knob.js +18 -15
- package/knob/knob.min.js +1 -1
- package/listbox/Listbox.d.ts +137 -1
- package/listbox/Listbox.vue +28 -15
- package/listbox/listbox.cjs.js +83 -78
- package/listbox/listbox.cjs.min.js +1 -1
- package/listbox/listbox.esm.js +83 -79
- package/listbox/listbox.esm.min.js +1 -1
- package/listbox/listbox.js +84 -80
- package/listbox/listbox.min.js +1 -1
- package/megamenu/MegaMenu.d.ts +5 -5
- package/menu/Menu.d.ts +4 -4
- package/menubar/Menubar.d.ts +1 -1
- package/multiselect/MultiSelect.d.ts +223 -1
- package/multiselect/MultiSelect.vue +72 -41
- package/multiselect/multiselect.cjs.js +156 -151
- package/multiselect/multiselect.cjs.min.js +1 -1
- package/multiselect/multiselect.esm.js +156 -152
- package/multiselect/multiselect.esm.min.js +1 -1
- package/multiselect/multiselect.js +157 -153
- package/multiselect/multiselect.min.js +1 -1
- package/orderlist/OrderList.d.ts +94 -0
- package/orderlist/OrderList.vue +38 -18
- package/orderlist/orderlist.cjs.js +50 -36
- package/orderlist/orderlist.cjs.min.js +1 -1
- package/orderlist/orderlist.esm.js +50 -37
- package/orderlist/orderlist.esm.min.js +1 -1
- package/orderlist/orderlist.js +51 -38
- package/orderlist/orderlist.min.js +1 -1
- package/organizationchart/OrganizationChart.d.ts +129 -0
- package/organizationchart/OrganizationChart.vue +14 -2
- package/organizationchart/OrganizationChartNode.vue +37 -16
- package/organizationchart/organizationchart.cjs.js +77 -61
- package/organizationchart/organizationchart.cjs.min.js +1 -1
- package/organizationchart/organizationchart.esm.js +77 -62
- package/organizationchart/organizationchart.esm.min.js +1 -1
- package/organizationchart/organizationchart.js +78 -63
- package/organizationchart/organizationchart.min.js +1 -1
- package/package.json +1 -1
- package/paginator/CurrentPageReport.vue +5 -1
- package/paginator/FirstPageLink.vue +13 -2
- package/paginator/JumpToPageDropdown.vue +3 -1
- package/paginator/JumpToPageInput.vue +3 -1
- package/paginator/LastPageLink.vue +13 -2
- package/paginator/NextPageLink.vue +13 -2
- package/paginator/PageLinks.vue +12 -2
- package/paginator/Paginator.d.ts +133 -0
- package/paginator/Paginator.vue +23 -12
- package/paginator/PrevPageLink.vue +13 -2
- package/paginator/RowsPerPageDropdown.vue +3 -1
- package/paginator/paginator.cjs.js +135 -76
- package/paginator/paginator.cjs.min.js +1 -1
- package/paginator/paginator.esm.js +135 -77
- package/paginator/paginator.esm.min.js +1 -1
- package/paginator/paginator.js +136 -78
- package/paginator/paginator.min.js +1 -1
- package/panelmenu/PanelMenu.d.ts +4 -8
- package/password/Password.d.ts +104 -0
- package/password/Password.vue +11 -9
- package/password/password.cjs.js +26 -28
- package/password/password.cjs.min.js +1 -1
- package/password/password.esm.js +26 -29
- package/password/password.esm.min.js +1 -1
- package/password/password.js +27 -30
- package/password/password.min.js +1 -1
- package/picklist/PickList.d.ts +160 -0
- package/picklist/PickList.vue +46 -34
- package/picklist/picklist.cjs.js +111 -85
- package/picklist/picklist.cjs.min.js +1 -1
- package/picklist/picklist.esm.js +111 -86
- package/picklist/picklist.esm.min.js +1 -1
- package/picklist/picklist.js +112 -87
- package/picklist/picklist.min.js +1 -1
- package/radiobutton/RadioButton.d.ts +55 -0
- package/radiobutton/RadioButton.vue +7 -5
- package/radiobutton/radiobutton.cjs.js +19 -16
- package/radiobutton/radiobutton.cjs.min.js +1 -1
- package/radiobutton/radiobutton.esm.js +16 -17
- package/radiobutton/radiobutton.esm.min.js +1 -1
- package/radiobutton/radiobutton.js +20 -18
- package/radiobutton/radiobutton.min.js +1 -1
- package/rating/Rating.d.ts +96 -0
- package/rating/Rating.vue +32 -9
- package/rating/rating.cjs.js +41 -34
- package/rating/rating.cjs.min.js +1 -1
- package/rating/rating.esm.js +41 -35
- package/rating/rating.esm.min.js +1 -1
- package/rating/rating.js +42 -36
- package/rating/rating.min.js +1 -1
- package/row/Row.d.ts +29 -0
- package/row/Row.vue +3 -0
- package/row/row.cjs.js +7 -0
- package/row/row.cjs.min.js +1 -1
- package/row/row.esm.js +3 -0
- package/row/row.esm.min.js +1 -1
- package/row/row.js +7 -2
- package/row/row.min.js +1 -1
- package/selectbutton/SelectButton.d.ts +68 -0
- package/selectbutton/SelectButton.vue +13 -2
- package/selectbutton/selectbutton.cjs.js +20 -10
- package/selectbutton/selectbutton.cjs.min.js +1 -1
- package/selectbutton/selectbutton.esm.js +20 -11
- package/selectbutton/selectbutton.esm.min.js +1 -1
- package/selectbutton/selectbutton.js +21 -12
- package/selectbutton/selectbutton.min.js +1 -1
- package/slider/Slider.d.ts +48 -0
- package/slider/Slider.vue +7 -2
- package/slider/slider.cjs.js +22 -16
- package/slider/slider.cjs.min.js +1 -1
- package/slider/slider.esm.js +19 -17
- package/slider/slider.esm.min.js +1 -1
- package/slider/slider.js +23 -18
- package/slider/slider.min.js +1 -1
- package/splitbutton/SplitButton.d.ts +0 -4
- package/splitbutton/SplitButton.vue +2 -2
- package/splitbutton/splitbutton.cjs.js +7 -6
- package/splitbutton/splitbutton.cjs.min.js +1 -1
- package/splitbutton/splitbutton.esm.js +7 -6
- package/splitbutton/splitbutton.esm.min.js +1 -1
- package/splitbutton/splitbutton.js +7 -6
- package/splitbutton/splitbutton.min.js +1 -1
- package/splitter/Splitter.d.ts +3 -3
- package/textarea/Textarea.d.ts +32 -0
- package/textarea/Textarea.vue +4 -1
- package/textarea/textarea.cjs.js +9 -3
- package/textarea/textarea.cjs.min.js +1 -1
- package/textarea/textarea.esm.js +6 -4
- package/textarea/textarea.esm.min.js +1 -1
- package/textarea/textarea.js +10 -5
- package/textarea/textarea.min.js +1 -1
- package/timeline/Timeline.d.ts +49 -0
- package/timeline/Timeline.vue +9 -7
- package/timeline/timeline.cjs.js +19 -21
- package/timeline/timeline.cjs.min.js +1 -1
- package/timeline/timeline.esm.js +16 -22
- package/timeline/timeline.esm.min.js +1 -1
- package/timeline/timeline.js +20 -23
- package/timeline/timeline.min.js +1 -1
- package/toast/Toast.d.ts +4 -0
- package/toast/Toast.vue +1 -1
- package/toast/toast.cjs.js +3 -3
- package/toast/toast.cjs.min.js +1 -1
- package/toast/toast.esm.js +3 -3
- package/toast/toast.esm.min.js +1 -1
- package/toast/toast.js +3 -3
- package/toast/toast.min.js +1 -1
- package/togglebutton/ToggleButton.d.ts +59 -0
- package/togglebutton/ToggleButton.vue +7 -5
- package/togglebutton/togglebutton.cjs.js +15 -14
- package/togglebutton/togglebutton.cjs.min.js +1 -1
- package/togglebutton/togglebutton.esm.js +15 -15
- package/togglebutton/togglebutton.esm.min.js +1 -1
- package/togglebutton/togglebutton.js +16 -16
- package/togglebutton/togglebutton.min.js +1 -1
- package/tooltip/Tooltip.d.ts +10 -0
- package/tooltip/tooltip.cjs.js +51 -9
- package/tooltip/tooltip.cjs.min.js +1 -1
- package/tooltip/tooltip.esm.js +52 -10
- package/tooltip/tooltip.esm.min.js +1 -1
- package/tooltip/tooltip.js +51 -9
- package/tooltip/tooltip.min.js +1 -1
- package/tree/Tree.d.ts +137 -0
- package/tree/Tree.vue +12 -9
- package/tree/TreeNode.vue +23 -10
- package/tree/tree.cjs.js +85 -79
- package/tree/tree.cjs.min.js +1 -1
- package/tree/tree.esm.js +85 -80
- package/tree/tree.esm.min.js +1 -1
- package/tree/tree.js +86 -81
- package/tree/tree.min.js +1 -1
- package/treeselect/TreeSelect.d.ts +103 -1
- package/treeselect/TreeSelect.vue +15 -12
- package/treeselect/treeselect.cjs.js +37 -39
- package/treeselect/treeselect.cjs.min.js +1 -1
- package/treeselect/treeselect.esm.js +37 -40
- package/treeselect/treeselect.esm.min.js +1 -1
- package/treeselect/treeselect.js +38 -41
- package/treeselect/treeselect.min.js +1 -1
- package/treetable/BodyCell.vue +38 -10
- package/treetable/FooterCell.vue +15 -1
- package/treetable/HeaderCell.vue +28 -5
- package/treetable/TreeTable.d.ts +162 -0
- package/treetable/TreeTable.vue +25 -19
- package/treetable/TreeTableRow.vue +5 -0
- package/treetable/treetable.cjs.js +205 -158
- package/treetable/treetable.cjs.min.js +1 -1
- package/treetable/treetable.esm.js +205 -159
- package/treetable/treetable.esm.min.js +1 -1
- package/treetable/treetable.js +206 -160
- package/treetable/treetable.min.js +1 -1
- package/tristatecheckbox/TriStateCheckbox.d.ts +93 -0
- package/tristatecheckbox/TriStateCheckbox.vue +19 -8
- package/tristatecheckbox/tristatecheckbox.cjs.js +31 -22
- package/tristatecheckbox/tristatecheckbox.cjs.min.js +1 -1
- package/tristatecheckbox/tristatecheckbox.esm.js +31 -23
- package/tristatecheckbox/tristatecheckbox.esm.min.js +1 -1
- package/tristatecheckbox/tristatecheckbox.js +32 -24
- package/tristatecheckbox/tristatecheckbox.min.js +1 -1
- package/ts-helpers.d.ts +3 -1
- package/vetur-attributes.json +180 -0
- package/vetur-tags.json +94 -39
- package/virtualscroller/VirtualScroller.d.ts +97 -0
- package/virtualscroller/VirtualScroller.vue +7 -5
- package/virtualscroller/virtualscroller.cjs.js +22 -19
- package/virtualscroller/virtualscroller.cjs.min.js +1 -1
- package/virtualscroller/virtualscroller.esm.js +22 -20
- package/virtualscroller/virtualscroller.esm.min.js +1 -1
- package/virtualscroller/virtualscroller.js +23 -21
- package/virtualscroller/virtualscroller.min.js +1 -1
- package/web-types.json +467 -3
- package/datatable/TableLoadingBody.vue +0 -25
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var t=require("primevue/icons/spinner"),e=require("primevue/utils"),s=require("vue");function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var o={name:"VirtualScroller",emits:["update:numToleratedItems","scroll","scroll-index-change","lazy-load"],props:{id:{type:String,default:null},style:null,class:null,items:{type:Array,default:null},itemSize:{type:[Number,Array],default:0},scrollHeight:null,scrollWidth:null,orientation:{type:String,default:"vertical"},numToleratedItems:{type:Number,default:null},delay:{type:Number,default:0},resizeDelay:{type:Number,default:10},lazy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loaderDisabled:{type:Boolean,default:!1},columns:{type:Array,default:null},loading:{type:Boolean,default:!1},showSpacer:{type:Boolean,default:!0},showLoader:{type:Boolean,default:!1},tabindex:{type:Number,default:0},inline:{type:Boolean,default:!1},step:{type:Number,default:0},appendOnly:{type:Boolean,default:!1},autoSize:{type:Boolean,default:!1}},data(){return{first:this.isBoth()?{rows:0,cols:0}:0,last:this.isBoth()?{rows:0,cols:0}:0,page:this.isBoth()?{rows:0,cols:0}:0,numItemsInViewport:this.isBoth()?{rows:0,cols:0}:0,lastScrollPos:this.isBoth()?{top:0,left:0}:0,d_numToleratedItems:this.numToleratedItems,d_loading:this.loading,loaderArr:[],spacerStyle:{},contentStyle:{}}},element:null,content:null,lastScrollPos:null,scrollTimeout:null,resizeTimeout:null,defaultWidth:0,defaultHeight:0,defaultContentWidth:0,defaultContentHeight:0,isRangeChanged:!1,lazyLoadState:{},resizeListener:null,initialized:!1,watch:{numToleratedItems(t){this.d_numToleratedItems=t},loading(t){this.d_loading=t},items(t,e){e&&e.length===(t||[]).length||(this.init(),this.calculateAutoSize())},itemSize(){this.init(),this.calculateAutoSize()},orientation(){this.lastScrollPos=this.isBoth()?{top:0,left:0}:0},scrollHeight(){this.init(),this.calculateAutoSize()},scrollWidth(){this.init(),this.calculateAutoSize()}},mounted(){this.viewInit(),this.lastScrollPos=this.isBoth()?{top:0,left:0}:0,this.lazyLoadState=this.lazyLoadState||{}},updated(){!this.initialized&&this.viewInit()},unmounted(){this.unbindResizeListener(),this.initialized=!1},methods:{viewInit(){e.DomHandler.isVisible(this.element)&&(this.setContentEl(this.content),this.init(),this.bindResizeListener(),this.defaultWidth=e.DomHandler.getWidth(this.element),this.defaultHeight=e.DomHandler.getHeight(this.element),this.defaultContentWidth=e.DomHandler.getWidth(this.content),this.defaultContentHeight=e.DomHandler.getHeight(this.content),this.initialized=!0)},init(){this.disabled||(this.setSize(),this.calculateOptions(),this.setSpacerSize())},isVertical(){return"vertical"===this.orientation},isHorizontal(){return"horizontal"===this.orientation},isBoth(){return"both"===this.orientation},scrollTo(t){this.lastScrollPos=this.both?{top:0,left:0}:0,this.element&&this.element.scrollTo(t)},scrollToIndex(t,e="auto"){const s=this.isBoth(),i=this.isHorizontal(),o=this.first,{numToleratedItems:l}=this.calculateNumItems(),n=this.getContentPosition(),r=this.itemSize,h=(t=0,e)=>t<=e?0:t,a=(t,e,s)=>t*e+s,d=(t=0,s=0)=>this.scrollTo({left:t,top:s,behavior:e});let c=s?{rows:0,cols:0}:0,m=!1;s?(c={rows:h(t[0],l[0]),cols:h(t[1],l[1])},d(a(c.cols,r[1],n.left),a(c.rows,r[0],n.top)),m=c.rows!==o.rows||c.cols!==o.cols):(c=h(t,l),i?d(a(c,r,n.left),0):d(0,a(c,r,n.top)),m=c!==o),this.isRangeChanged=m,this.first=c},scrollInView(t,e,s="auto"){if(e){const i=this.isBoth(),o=this.isHorizontal(),{first:l,viewport:n}=this.getRenderedRange(),r=(t=0,e=0)=>this.scrollTo({left:t,top:e,behavior:s}),h="to-end"===e;if("to-start"===e){if(i)n.first.rows-l.rows>t[0]?r(n.first.cols*this.itemSize[1],(n.first.rows-1)*this.itemSize[0]):n.first.cols-l.cols>t[1]&&r((n.first.cols-1)*this.itemSize[1],n.first.rows*this.itemSize[0]);else if(n.first-l>t){const t=(n.first-1)*this.itemSize;o?r(t,0):r(0,t)}}else if(h)if(i)n.last.rows-l.rows<=t[0]+1?r(n.first.cols*this.itemSize[1],(n.first.rows+1)*this.itemSize[0]):n.last.cols-l.cols<=t[1]+1&&r((n.first.cols+1)*this.itemSize[1],n.first.rows*this.itemSize[0]);else if(n.last-l<=t+1){const t=(n.first+1)*this.itemSize;o?r(t,0):r(0,t)}}else this.scrollToIndex(t,s)},getRenderedRange(){const t=(t,e)=>Math.floor(t/(e||t));let e=this.first,s=0;if(this.element){const i=this.isBoth(),o=this.isHorizontal(),{scrollTop:l,scrollLeft:n}=this.element.scrollTop;if(i)e={rows:t(l,this.itemSize[0]),cols:t(n,this.itemSize[1])},s={rows:e.rows+this.numItemsInViewport.rows,cols:e.cols+this.numItemsInViewport.cols};else{e=t(o?n:l,this.itemSize),s=e+this.numItemsInViewport}}return{first:this.first,last:this.last,viewport:{first:e,last:s}}},calculateNumItems(){const t=this.isBoth(),e=this.isHorizontal(),s=this.itemSize,i=this.getContentPosition(),o=this.element?this.element.offsetWidth-i.left:0,l=this.element?this.element.offsetHeight-i.top:0,n=(t,e)=>Math.ceil(t/(e||t)),r=t=>Math.ceil(t/2),h=t?{rows:n(l,s[0]),cols:n(o,s[1])}:n(e?o:l,s);return{numItemsInViewport:h,numToleratedItems:this.d_numToleratedItems||(t?[r(h.rows),r(h.cols)]:r(h))}},calculateOptions(){const t=this.isBoth(),e=this.first,{numItemsInViewport:s,numToleratedItems:i}=this.calculateNumItems(),o=(t,e,s,i=!1)=>this.getLast(t+e+(t<s?2:3)*s,i),l=t?{rows:o(e.rows,s.rows,i[0]),cols:o(e.cols,s.cols,i[1],!0)}:o(e,s,i);this.last=l,this.numItemsInViewport=s,this.d_numToleratedItems=i,this.$emit("update:numToleratedItems",this.d_numToleratedItems),this.showLoader&&(this.loaderArr=t?Array.from({length:s.rows}).map((()=>Array.from({length:s.cols}))):Array.from({length:s})),this.lazy&&Promise.resolve().then((()=>{this.lazyLoadState={first:this.step?t?{rows:0,cols:e.cols}:0:e,last:Math.min(this.step?this.step:l,this.items.length)},this.$emit("lazy-load",this.lazyLoadState)}))},calculateAutoSize(){this.autoSize&&!this.d_loading&&Promise.resolve().then((()=>{if(this.content){const t=this.isBoth(),s=this.isHorizontal(),i=this.isVertical();this.content.style.minHeight=this.content.style.minWidth="auto",this.content.style.position="relative",this.element.style.contain="none";const[o,l]=[e.DomHandler.getWidth(this.content),e.DomHandler.getHeight(this.content)];o!==this.defaultContentWidth&&(this.element.style.width=""),l!==this.defaultContentHeight&&(this.element.style.height="");const[n,r]=[e.DomHandler.getWidth(this.element),e.DomHandler.getHeight(this.element)];(t||s)&&(this.element.style.width=n<this.defaultWidth?n+"px":this.scrollWidth||this.defaultWidth+"px"),(t||i)&&(this.element.style.height=r<this.defaultHeight?r+"px":this.scrollHeight||this.defaultHeight+"px"),this.content.style.minHeight=this.content.style.minWidth="",this.content.style.position="",this.element.style.contain=""}}))},getLast(t=0,e){return this.items?Math.min(e?(this.columns||this.items[0]).length:this.items.length,t):0},getContentPosition(){if(this.content){const t=getComputedStyle(this.content),e=parseFloat(t.paddingLeft)+Math.max(parseFloat(t.left)||0,0),s=parseFloat(t.paddingRight)+Math.max(parseFloat(t.right)||0,0),i=parseFloat(t.paddingTop)+Math.max(parseFloat(t.top)||0,0),o=parseFloat(t.paddingBottom)+Math.max(parseFloat(t.bottom)||0,0);return{left:e,right:s,top:i,bottom:o,x:e+s,y:i+o}}return{left:0,right:0,top:0,bottom:0,x:0,y:0}},setSize(){if(this.element){const t=this.isBoth(),e=this.isHorizontal(),s=this.element.parentElement,i=this.scrollWidth||`${this.element.offsetWidth||s.offsetWidth}px`,o=this.scrollHeight||`${this.element.offsetHeight||s.offsetHeight}px`,l=(t,e)=>this.element.style[t]=e;t||e?(l("height",o),l("width",i)):l("height",o)}},setSpacerSize(){const t=this.items;if(t){const e=this.isBoth(),s=this.isHorizontal(),i=this.getContentPosition(),o=(t,e,s,i=0)=>this.spacerStyle={...this.spacerStyle,[`${t}`]:(e||[]).length*s+i+"px"};e?(o("height",t,this.itemSize[0],i.y),o("width",this.columns||t[1],this.itemSize[1],i.x)):s?o("width",this.columns||t,this.itemSize,i.x):o("height",t,this.itemSize,i.y)}},setContentPosition(t){if(this.content&&!this.appendOnly){const e=this.isBoth(),s=this.isHorizontal(),i=t?t.first:this.first,o=(t,e)=>t*e,l=(t=0,e=0)=>this.contentStyle={...this.contentStyle,transform:`translate3d(${t}px, ${e}px, 0)`};if(e)l(o(i.cols,this.itemSize[1]),o(i.rows,this.itemSize[0]));else{const t=o(i,this.itemSize);s?l(t,0):l(0,t)}}},onScrollPositionChange(t){const e=t.target,s=this.isBoth(),i=this.isHorizontal(),o=this.getContentPosition(),l=(t,e)=>t?t>e?t-e:t:0,n=(t,e)=>Math.floor(t/(e||t)),r=(t,e,s,i,o,l)=>t<=o?o:l?s-i-o:e+o-1,h=(t,e,s,i,o,l,n)=>t<=l?0:Math.max(0,n?t<e?s:t-l:t>e?s:t-2*l),a=(t,e,s,i,o,l)=>{let n=e+i+2*o;return t>=o&&(n+=o+1),this.getLast(n,l)},d=l(e.scrollTop,o.top),c=l(e.scrollLeft,o.left);let m=s?{rows:0,cols:0}:0,u=this.last,p=!1,f=this.lastScrollPos;if(s){const t=this.lastScrollPos.top<=d,e=this.lastScrollPos.left<=c;if(!this.appendOnly||this.appendOnly&&(t||e)){const s={rows:n(d,this.itemSize[0]),cols:n(c,this.itemSize[1])},i={rows:r(s.rows,this.first.rows,this.last.rows,this.numItemsInViewport.rows,this.d_numToleratedItems[0],t),cols:r(s.cols,this.first.cols,this.last.cols,this.numItemsInViewport.cols,this.d_numToleratedItems[1],e)};m={rows:h(s.rows,i.rows,this.first.rows,this.last.rows,this.numItemsInViewport.rows,this.d_numToleratedItems[0],t),cols:h(s.cols,i.cols,this.first.cols,this.last.cols,this.numItemsInViewport.cols,this.d_numToleratedItems[1],e)},u={rows:a(s.rows,m.rows,this.last.rows,this.numItemsInViewport.rows,this.d_numToleratedItems[0]),cols:a(s.cols,m.cols,this.last.cols,this.numItemsInViewport.cols,this.d_numToleratedItems[1],!0)},p=m.rows!==this.first.rows||u.rows!==this.last.rows||m.cols!==this.first.cols||u.cols!==this.last.cols||this.isRangeChanged,f={top:d,left:c}}}else{const t=i?c:d,e=this.lastScrollPos<=t;if(!this.appendOnly||this.appendOnly&&e){const s=n(t,this.itemSize);m=h(s,r(s,this.first,this.last,this.numItemsInViewport,this.d_numToleratedItems,e),this.first,this.last,this.numItemsInViewport,this.d_numToleratedItems,e),u=a(s,m,this.last,this.numItemsInViewport,this.d_numToleratedItems),p=m!==this.first||u!==this.last||this.isRangeChanged,f=t}}return{first:m,last:u,isRangeChanged:p,scrollPos:f}},onScrollChange(t){const{first:e,last:s,isRangeChanged:i,scrollPos:o}=this.onScrollPositionChange(t);if(i){const t={first:e,last:s};if(this.setContentPosition(t),this.first=e,this.last=s,this.lastScrollPos=o,this.$emit("scroll-index-change",t),this.lazy&&this.isPageChanged(e)){const t={first:this.step?Math.min(this.getPageByFirst(e)*this.step,this.items.length-this.step):e,last:Math.min(this.step?(this.getPageByFirst(e)+1)*this.step:s,this.items.length)};(this.lazyLoadState.first!==t.first||this.lazyLoadState.last!==t.last)&&this.$emit("lazy-load",t),this.lazyLoadState=t}}},onScroll(t){if(this.$emit("scroll",t),this.delay&&this.isPageChanged()){if(this.scrollTimeout&&clearTimeout(this.scrollTimeout),!this.d_loading&&this.showLoader){const{isRangeChanged:e}=this.onScrollPositionChange(t);(e||!!this.step&&this.isPageChanged())&&(this.d_loading=!0)}this.scrollTimeout=setTimeout((()=>{this.onScrollChange(t),!this.d_loading||!this.showLoader||this.lazy&&void 0!==this.loading||(this.d_loading=!1,this.page=this.getPageByFirst())}),this.delay)}else this.onScrollChange(t)},onResize(){this.resizeTimeout&&clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout((()=>{if(e.DomHandler.isVisible(this.element)){const t=this.isBoth(),s=this.isVertical(),i=this.isHorizontal(),[o,l]=[e.DomHandler.getWidth(this.element),e.DomHandler.getHeight(this.element)],[n,r]=[o!==this.defaultWidth,l!==this.defaultHeight];(t?n||r:i?n:!!s&&r)&&(this.d_numToleratedItems=this.numToleratedItems,this.defaultWidth=o,this.defaultHeight=l,this.defaultContentWidth=e.DomHandler.getWidth(this.content),this.defaultContentHeight=e.DomHandler.getHeight(this.content),this.init())}}),this.resizeDelay)},bindResizeListener(){this.resizeListener||(this.resizeListener=this.onResize.bind(this),window.addEventListener("resize",this.resizeListener),window.addEventListener("orientationchange",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),window.removeEventListener("orientationchange",this.resizeListener),this.resizeListener=null)},getOptions(t){const e=(this.items||[]).length,s=this.isBoth()?this.first.rows+t:this.first+t;return{index:s,count:e,first:0===s,last:s===e-1,even:s%2==0,odd:s%2!=0}},getLoaderOptions(t,e){let s=this.loaderArr.length;return{index:t,count:s,first:0===t,last:t===s-1,even:t%2==0,odd:t%2!=0,...e}},getPageByFirst(t){return Math.floor(((t??this.first)+4*this.d_numToleratedItems)/(this.step||1))},isPageChanged(t){return!this.step||this.page!==this.getPageByFirst(t??this.first)},setContentEl(t){this.content=t||this.content||e.DomHandler.findSingle(this.element,".p-virtualscroller-content")},elementRef(t){this.element=t},contentRef(t){this.content=t}},computed:{containerClass(){return["p-virtualscroller",{"p-virtualscroller-inline":this.inline,"p-virtualscroller-both p-both-scroll":this.isBoth(),"p-virtualscroller-horizontal p-horizontal-scroll":this.isHorizontal()},this.class]},contentClass(){return["p-virtualscroller-content",{"p-virtualscroller-loading":this.d_loading}]},loaderClass(){return["p-virtualscroller-loader",{"p-component-overlay":!this.$slots.loader}]},loadedItems(){return this.items&&!this.d_loading?this.isBoth()?this.items.slice(this.appendOnly?0:this.first.rows,this.last.rows).map((t=>this.columns?t:t.slice(this.appendOnly?0:this.first.cols,this.last.cols))):this.isHorizontal()&&this.columns?this.items:this.items.slice(this.appendOnly?0:this.first,this.last):[]},loadedRows(){return this.d_loading?this.loaderDisabled?this.loaderArr:[]:this.loadedItems},loadedColumns(){if(this.columns){const t=this.isBoth(),e=this.isHorizontal();if(t||e)return this.d_loading&&this.loaderDisabled?t?this.loaderArr[0]:this.loaderArr:this.columns.slice(t?this.first.cols:this.first,t?this.last.cols:this.last)}return this.columns}},components:{SpinnerIcon:i(t).default}};const l=["tabindex"];!function(t,e){void 0===e&&(e={});var s=e.insertAt;if(t&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===s&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}("\n.p-virtualscroller {\n position: relative;\n overflow: auto;\n contain: strict;\n transform: translateZ(0);\n will-change: scroll-position;\n outline: 0 none;\n}\n.p-virtualscroller-content {\n position: absolute;\n top: 0;\n left: 0;\n /* contain: content; */\n min-height: 100%;\n min-width: 100%;\n will-change: transform;\n}\n.p-virtualscroller-spacer {\n position: absolute;\n top: 0;\n left: 0;\n height: 1px;\n width: 1px;\n transform-origin: 0 0;\n pointer-events: none;\n}\n.p-virtualscroller .p-virtualscroller-loader {\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n.p-virtualscroller-loader.p-component-overlay {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.p-virtualscroller-loading-icon {\n font-size: 2rem;\n}\n.p-virtualscroller-loading-icon.p-icon {\n width: 2rem;\n height: 2rem;\n}\n.p-virtualscroller-horizontal > .p-virtualscroller-content {\n display: flex;\n}\n\n/* Inline */\n.p-virtualscroller-inline .p-virtualscroller-content {\n position: static;\n}\n"),o.render=function(t,e,i,o,n,r){const h=s.resolveComponent("SpinnerIcon");return i.disabled?(s.openBlock(),s.createElementBlock(s.Fragment,{key:1},[s.renderSlot(t.$slots,"default"),s.renderSlot(t.$slots,"content",{items:i.items,rows:i.items,columns:r.loadedColumns})],64)):(s.openBlock(),s.createElementBlock("div",{key:0,ref:r.elementRef,class:s.normalizeClass(r.containerClass),tabindex:i.tabindex,style:s.normalizeStyle(i.style),onScroll:e[0]||(e[0]=(...t)=>r.onScroll&&r.onScroll(...t))},[s.renderSlot(t.$slots,"content",{styleClass:r.contentClass,items:r.loadedItems,getItemOptions:r.getOptions,loading:n.d_loading,getLoaderOptions:r.getLoaderOptions,itemSize:i.itemSize,rows:r.loadedRows,columns:r.loadedColumns,contentRef:r.contentRef,spacerStyle:n.spacerStyle,contentStyle:n.contentStyle,vertical:r.isVertical(),horizontal:r.isHorizontal(),both:r.isBoth()},(()=>[s.createElementVNode("div",{ref:r.contentRef,class:s.normalizeClass(r.contentClass),style:s.normalizeStyle(n.contentStyle)},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(r.loadedItems,((e,i)=>s.renderSlot(t.$slots,"item",{key:i,item:e,options:r.getOptions(i)}))),128))],6)])),i.showSpacer?(s.openBlock(),s.createElementBlock("div",{key:0,class:"p-virtualscroller-spacer",style:s.normalizeStyle(n.spacerStyle)},null,4)):s.createCommentVNode("",!0),!i.loaderDisabled&&i.showLoader&&n.d_loading?(s.openBlock(),s.createElementBlock("div",{key:1,class:s.normalizeClass(r.loaderClass)},[t.$slots&&t.$slots.loader?(s.openBlock(!0),s.createElementBlock(s.Fragment,{key:0},s.renderList(n.loaderArr,((e,i)=>s.renderSlot(t.$slots,"loader",{key:i,options:r.getLoaderOptions(i,r.isBoth()&&{numCols:t.d_numItemsInViewport.cols})}))),128)):s.createCommentVNode("",!0),s.renderSlot(t.$slots,"loadingicon",{},(()=>[s.createVNode(h,{spin:"",class:"p-virtualscroller-loading-icon"})]))],2)):s.createCommentVNode("",!0)],46,l))},module.exports=o;
|
|
1
|
+
"use strict";var t=require("primevue/basecomponent"),e=require("primevue/icons/spinner"),s=require("primevue/utils"),i=require("vue");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var l=o(t),n=o(e),r={name:"VirtualScroller",extends:l.default,emits:["update:numToleratedItems","scroll","scroll-index-change","lazy-load"],props:{id:{type:String,default:null},style:null,class:null,items:{type:Array,default:null},itemSize:{type:[Number,Array],default:0},scrollHeight:null,scrollWidth:null,orientation:{type:String,default:"vertical"},numToleratedItems:{type:Number,default:null},delay:{type:Number,default:0},resizeDelay:{type:Number,default:10},lazy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loaderDisabled:{type:Boolean,default:!1},columns:{type:Array,default:null},loading:{type:Boolean,default:!1},showSpacer:{type:Boolean,default:!0},showLoader:{type:Boolean,default:!1},tabindex:{type:Number,default:0},inline:{type:Boolean,default:!1},step:{type:Number,default:0},appendOnly:{type:Boolean,default:!1},autoSize:{type:Boolean,default:!1}},data(){return{first:this.isBoth()?{rows:0,cols:0}:0,last:this.isBoth()?{rows:0,cols:0}:0,page:this.isBoth()?{rows:0,cols:0}:0,numItemsInViewport:this.isBoth()?{rows:0,cols:0}:0,lastScrollPos:this.isBoth()?{top:0,left:0}:0,d_numToleratedItems:this.numToleratedItems,d_loading:this.loading,loaderArr:[],spacerStyle:{},contentStyle:{}}},element:null,content:null,lastScrollPos:null,scrollTimeout:null,resizeTimeout:null,defaultWidth:0,defaultHeight:0,defaultContentWidth:0,defaultContentHeight:0,isRangeChanged:!1,lazyLoadState:{},resizeListener:null,initialized:!1,watch:{numToleratedItems(t){this.d_numToleratedItems=t},loading(t){this.d_loading=t},items(t,e){e&&e.length===(t||[]).length||(this.init(),this.calculateAutoSize())},itemSize(){this.init(),this.calculateAutoSize()},orientation(){this.lastScrollPos=this.isBoth()?{top:0,left:0}:0},scrollHeight(){this.init(),this.calculateAutoSize()},scrollWidth(){this.init(),this.calculateAutoSize()}},mounted(){this.viewInit(),this.lastScrollPos=this.isBoth()?{top:0,left:0}:0,this.lazyLoadState=this.lazyLoadState||{}},updated(){!this.initialized&&this.viewInit()},unmounted(){this.unbindResizeListener(),this.initialized=!1},methods:{viewInit(){s.DomHandler.isVisible(this.element)&&(this.setContentEl(this.content),this.init(),this.bindResizeListener(),this.defaultWidth=s.DomHandler.getWidth(this.element),this.defaultHeight=s.DomHandler.getHeight(this.element),this.defaultContentWidth=s.DomHandler.getWidth(this.content),this.defaultContentHeight=s.DomHandler.getHeight(this.content),this.initialized=!0)},init(){this.disabled||(this.setSize(),this.calculateOptions(),this.setSpacerSize())},isVertical(){return"vertical"===this.orientation},isHorizontal(){return"horizontal"===this.orientation},isBoth(){return"both"===this.orientation},scrollTo(t){this.lastScrollPos=this.both?{top:0,left:0}:0,this.element&&this.element.scrollTo(t)},scrollToIndex(t,e="auto"){const s=this.isBoth(),i=this.isHorizontal(),o=this.first,{numToleratedItems:l}=this.calculateNumItems(),n=this.getContentPosition(),r=this.itemSize,h=(t=0,e)=>t<=e?0:t,a=(t,e,s)=>t*e+s,d=(t=0,s=0)=>this.scrollTo({left:t,top:s,behavior:e});let c=s?{rows:0,cols:0}:0,m=!1;s?(c={rows:h(t[0],l[0]),cols:h(t[1],l[1])},d(a(c.cols,r[1],n.left),a(c.rows,r[0],n.top)),m=c.rows!==o.rows||c.cols!==o.cols):(c=h(t,l),i?d(a(c,r,n.left),0):d(0,a(c,r,n.top)),m=c!==o),this.isRangeChanged=m,this.first=c},scrollInView(t,e,s="auto"){if(e){const i=this.isBoth(),o=this.isHorizontal(),{first:l,viewport:n}=this.getRenderedRange(),r=(t=0,e=0)=>this.scrollTo({left:t,top:e,behavior:s}),h="to-end"===e;if("to-start"===e){if(i)n.first.rows-l.rows>t[0]?r(n.first.cols*this.itemSize[1],(n.first.rows-1)*this.itemSize[0]):n.first.cols-l.cols>t[1]&&r((n.first.cols-1)*this.itemSize[1],n.first.rows*this.itemSize[0]);else if(n.first-l>t){const t=(n.first-1)*this.itemSize;o?r(t,0):r(0,t)}}else if(h)if(i)n.last.rows-l.rows<=t[0]+1?r(n.first.cols*this.itemSize[1],(n.first.rows+1)*this.itemSize[0]):n.last.cols-l.cols<=t[1]+1&&r((n.first.cols+1)*this.itemSize[1],n.first.rows*this.itemSize[0]);else if(n.last-l<=t+1){const t=(n.first+1)*this.itemSize;o?r(t,0):r(0,t)}}else this.scrollToIndex(t,s)},getRenderedRange(){const t=(t,e)=>Math.floor(t/(e||t));let e=this.first,s=0;if(this.element){const i=this.isBoth(),o=this.isHorizontal(),{scrollTop:l,scrollLeft:n}=this.element.scrollTop;if(i)e={rows:t(l,this.itemSize[0]),cols:t(n,this.itemSize[1])},s={rows:e.rows+this.numItemsInViewport.rows,cols:e.cols+this.numItemsInViewport.cols};else{e=t(o?n:l,this.itemSize),s=e+this.numItemsInViewport}}return{first:this.first,last:this.last,viewport:{first:e,last:s}}},calculateNumItems(){const t=this.isBoth(),e=this.isHorizontal(),s=this.itemSize,i=this.getContentPosition(),o=this.element?this.element.offsetWidth-i.left:0,l=this.element?this.element.offsetHeight-i.top:0,n=(t,e)=>Math.ceil(t/(e||t)),r=t=>Math.ceil(t/2),h=t?{rows:n(l,s[0]),cols:n(o,s[1])}:n(e?o:l,s);return{numItemsInViewport:h,numToleratedItems:this.d_numToleratedItems||(t?[r(h.rows),r(h.cols)]:r(h))}},calculateOptions(){const t=this.isBoth(),e=this.first,{numItemsInViewport:s,numToleratedItems:i}=this.calculateNumItems(),o=(t,e,s,i=!1)=>this.getLast(t+e+(t<s?2:3)*s,i),l=t?{rows:o(e.rows,s.rows,i[0]),cols:o(e.cols,s.cols,i[1],!0)}:o(e,s,i);this.last=l,this.numItemsInViewport=s,this.d_numToleratedItems=i,this.$emit("update:numToleratedItems",this.d_numToleratedItems),this.showLoader&&(this.loaderArr=t?Array.from({length:s.rows}).map((()=>Array.from({length:s.cols}))):Array.from({length:s})),this.lazy&&Promise.resolve().then((()=>{this.lazyLoadState={first:this.step?t?{rows:0,cols:e.cols}:0:e,last:Math.min(this.step?this.step:l,this.items.length)},this.$emit("lazy-load",this.lazyLoadState)}))},calculateAutoSize(){this.autoSize&&!this.d_loading&&Promise.resolve().then((()=>{if(this.content){const t=this.isBoth(),e=this.isHorizontal(),i=this.isVertical();this.content.style.minHeight=this.content.style.minWidth="auto",this.content.style.position="relative",this.element.style.contain="none";const[o,l]=[s.DomHandler.getWidth(this.content),s.DomHandler.getHeight(this.content)];o!==this.defaultContentWidth&&(this.element.style.width=""),l!==this.defaultContentHeight&&(this.element.style.height="");const[n,r]=[s.DomHandler.getWidth(this.element),s.DomHandler.getHeight(this.element)];(t||e)&&(this.element.style.width=n<this.defaultWidth?n+"px":this.scrollWidth||this.defaultWidth+"px"),(t||i)&&(this.element.style.height=r<this.defaultHeight?r+"px":this.scrollHeight||this.defaultHeight+"px"),this.content.style.minHeight=this.content.style.minWidth="",this.content.style.position="",this.element.style.contain=""}}))},getLast(t=0,e){return this.items?Math.min(e?(this.columns||this.items[0]).length:this.items.length,t):0},getContentPosition(){if(this.content){const t=getComputedStyle(this.content),e=parseFloat(t.paddingLeft)+Math.max(parseFloat(t.left)||0,0),s=parseFloat(t.paddingRight)+Math.max(parseFloat(t.right)||0,0),i=parseFloat(t.paddingTop)+Math.max(parseFloat(t.top)||0,0),o=parseFloat(t.paddingBottom)+Math.max(parseFloat(t.bottom)||0,0);return{left:e,right:s,top:i,bottom:o,x:e+s,y:i+o}}return{left:0,right:0,top:0,bottom:0,x:0,y:0}},setSize(){if(this.element){const t=this.isBoth(),e=this.isHorizontal(),s=this.element.parentElement,i=this.scrollWidth||`${this.element.offsetWidth||s.offsetWidth}px`,o=this.scrollHeight||`${this.element.offsetHeight||s.offsetHeight}px`,l=(t,e)=>this.element.style[t]=e;t||e?(l("height",o),l("width",i)):l("height",o)}},setSpacerSize(){const t=this.items;if(t){const e=this.isBoth(),s=this.isHorizontal(),i=this.getContentPosition(),o=(t,e,s,i=0)=>this.spacerStyle={...this.spacerStyle,[`${t}`]:(e||[]).length*s+i+"px"};e?(o("height",t,this.itemSize[0],i.y),o("width",this.columns||t[1],this.itemSize[1],i.x)):s?o("width",this.columns||t,this.itemSize,i.x):o("height",t,this.itemSize,i.y)}},setContentPosition(t){if(this.content&&!this.appendOnly){const e=this.isBoth(),s=this.isHorizontal(),i=t?t.first:this.first,o=(t,e)=>t*e,l=(t=0,e=0)=>this.contentStyle={...this.contentStyle,transform:`translate3d(${t}px, ${e}px, 0)`};if(e)l(o(i.cols,this.itemSize[1]),o(i.rows,this.itemSize[0]));else{const t=o(i,this.itemSize);s?l(t,0):l(0,t)}}},onScrollPositionChange(t){const e=t.target,s=this.isBoth(),i=this.isHorizontal(),o=this.getContentPosition(),l=(t,e)=>t?t>e?t-e:t:0,n=(t,e)=>Math.floor(t/(e||t)),r=(t,e,s,i,o,l)=>t<=o?o:l?s-i-o:e+o-1,h=(t,e,s,i,o,l,n)=>t<=l?0:Math.max(0,n?t<e?s:t-l:t>e?s:t-2*l),a=(t,e,s,i,o,l)=>{let n=e+i+2*o;return t>=o&&(n+=o+1),this.getLast(n,l)},d=l(e.scrollTop,o.top),c=l(e.scrollLeft,o.left);let m=s?{rows:0,cols:0}:0,u=this.last,p=!1,f=this.lastScrollPos;if(s){const t=this.lastScrollPos.top<=d,e=this.lastScrollPos.left<=c;if(!this.appendOnly||this.appendOnly&&(t||e)){const s={rows:n(d,this.itemSize[0]),cols:n(c,this.itemSize[1])},i={rows:r(s.rows,this.first.rows,this.last.rows,this.numItemsInViewport.rows,this.d_numToleratedItems[0],t),cols:r(s.cols,this.first.cols,this.last.cols,this.numItemsInViewport.cols,this.d_numToleratedItems[1],e)};m={rows:h(s.rows,i.rows,this.first.rows,this.last.rows,this.numItemsInViewport.rows,this.d_numToleratedItems[0],t),cols:h(s.cols,i.cols,this.first.cols,this.last.cols,this.numItemsInViewport.cols,this.d_numToleratedItems[1],e)},u={rows:a(s.rows,m.rows,this.last.rows,this.numItemsInViewport.rows,this.d_numToleratedItems[0]),cols:a(s.cols,m.cols,this.last.cols,this.numItemsInViewport.cols,this.d_numToleratedItems[1],!0)},p=m.rows!==this.first.rows||u.rows!==this.last.rows||m.cols!==this.first.cols||u.cols!==this.last.cols||this.isRangeChanged,f={top:d,left:c}}}else{const t=i?c:d,e=this.lastScrollPos<=t;if(!this.appendOnly||this.appendOnly&&e){const s=n(t,this.itemSize);m=h(s,r(s,this.first,this.last,this.numItemsInViewport,this.d_numToleratedItems,e),this.first,this.last,this.numItemsInViewport,this.d_numToleratedItems,e),u=a(s,m,this.last,this.numItemsInViewport,this.d_numToleratedItems),p=m!==this.first||u!==this.last||this.isRangeChanged,f=t}}return{first:m,last:u,isRangeChanged:p,scrollPos:f}},onScrollChange(t){const{first:e,last:s,isRangeChanged:i,scrollPos:o}=this.onScrollPositionChange(t);if(i){const t={first:e,last:s};if(this.setContentPosition(t),this.first=e,this.last=s,this.lastScrollPos=o,this.$emit("scroll-index-change",t),this.lazy&&this.isPageChanged(e)){const t={first:this.step?Math.min(this.getPageByFirst(e)*this.step,this.items.length-this.step):e,last:Math.min(this.step?(this.getPageByFirst(e)+1)*this.step:s,this.items.length)};(this.lazyLoadState.first!==t.first||this.lazyLoadState.last!==t.last)&&this.$emit("lazy-load",t),this.lazyLoadState=t}}},onScroll(t){if(this.$emit("scroll",t),this.delay&&this.isPageChanged()){if(this.scrollTimeout&&clearTimeout(this.scrollTimeout),!this.d_loading&&this.showLoader){const{isRangeChanged:e}=this.onScrollPositionChange(t);(e||!!this.step&&this.isPageChanged())&&(this.d_loading=!0)}this.scrollTimeout=setTimeout((()=>{this.onScrollChange(t),!this.d_loading||!this.showLoader||this.lazy&&void 0!==this.loading||(this.d_loading=!1,this.page=this.getPageByFirst())}),this.delay)}else this.onScrollChange(t)},onResize(){this.resizeTimeout&&clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout((()=>{if(s.DomHandler.isVisible(this.element)){const t=this.isBoth(),e=this.isVertical(),i=this.isHorizontal(),[o,l]=[s.DomHandler.getWidth(this.element),s.DomHandler.getHeight(this.element)],[n,r]=[o!==this.defaultWidth,l!==this.defaultHeight];(t?n||r:i?n:!!e&&r)&&(this.d_numToleratedItems=this.numToleratedItems,this.defaultWidth=o,this.defaultHeight=l,this.defaultContentWidth=s.DomHandler.getWidth(this.content),this.defaultContentHeight=s.DomHandler.getHeight(this.content),this.init())}}),this.resizeDelay)},bindResizeListener(){this.resizeListener||(this.resizeListener=this.onResize.bind(this),window.addEventListener("resize",this.resizeListener),window.addEventListener("orientationchange",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),window.removeEventListener("orientationchange",this.resizeListener),this.resizeListener=null)},getOptions(t){const e=(this.items||[]).length,s=this.isBoth()?this.first.rows+t:this.first+t;return{index:s,count:e,first:0===s,last:s===e-1,even:s%2==0,odd:s%2!=0}},getLoaderOptions(t,e){let s=this.loaderArr.length;return{index:t,count:s,first:0===t,last:t===s-1,even:t%2==0,odd:t%2!=0,...e}},getPageByFirst(t){return Math.floor(((t??this.first)+4*this.d_numToleratedItems)/(this.step||1))},isPageChanged(t){return!this.step||this.page!==this.getPageByFirst(t??this.first)},setContentEl(t){this.content=t||this.content||s.DomHandler.findSingle(this.element,".p-virtualscroller-content")},elementRef(t){this.element=t},contentRef(t){this.content=t}},computed:{containerClass(){return["p-virtualscroller",{"p-virtualscroller-inline":this.inline,"p-virtualscroller-both p-both-scroll":this.isBoth(),"p-virtualscroller-horizontal p-horizontal-scroll":this.isHorizontal()},this.class]},contentClass(){return["p-virtualscroller-content",{"p-virtualscroller-loading":this.d_loading}]},loaderClass(){return["p-virtualscroller-loader",{"p-component-overlay":!this.$slots.loader}]},loadedItems(){return this.items&&!this.d_loading?this.isBoth()?this.items.slice(this.appendOnly?0:this.first.rows,this.last.rows).map((t=>this.columns?t:t.slice(this.appendOnly?0:this.first.cols,this.last.cols))):this.isHorizontal()&&this.columns?this.items:this.items.slice(this.appendOnly?0:this.first,this.last):[]},loadedRows(){return this.d_loading?this.loaderDisabled?this.loaderArr:[]:this.loadedItems},loadedColumns(){if(this.columns){const t=this.isBoth(),e=this.isHorizontal();if(t||e)return this.d_loading&&this.loaderDisabled?t?this.loaderArr[0]:this.loaderArr:this.columns.slice(t?this.first.cols:this.first,t?this.last.cols:this.last)}return this.columns}},components:{SpinnerIcon:n.default}};const h=["tabindex"];!function(t,e){void 0===e&&(e={});var s=e.insertAt;if(t&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===s&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}("\n.p-virtualscroller {\n position: relative;\n overflow: auto;\n contain: strict;\n transform: translateZ(0);\n will-change: scroll-position;\n outline: 0 none;\n}\n.p-virtualscroller-content {\n position: absolute;\n top: 0;\n left: 0;\n /* contain: content; */\n min-height: 100%;\n min-width: 100%;\n will-change: transform;\n}\n.p-virtualscroller-spacer {\n position: absolute;\n top: 0;\n left: 0;\n height: 1px;\n width: 1px;\n transform-origin: 0 0;\n pointer-events: none;\n}\n.p-virtualscroller .p-virtualscroller-loader {\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n.p-virtualscroller-loader.p-component-overlay {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.p-virtualscroller-loading-icon {\n font-size: 2rem;\n}\n.p-virtualscroller-loading-icon.p-icon {\n width: 2rem;\n height: 2rem;\n}\n.p-virtualscroller-horizontal > .p-virtualscroller-content {\n display: flex;\n}\n\n/* Inline */\n.p-virtualscroller-inline .p-virtualscroller-content {\n position: static;\n}\n"),r.render=function(t,e,s,o,l,n){const r=i.resolveComponent("SpinnerIcon");return s.disabled?(i.openBlock(),i.createElementBlock(i.Fragment,{key:1},[i.renderSlot(t.$slots,"default"),i.renderSlot(t.$slots,"content",{items:s.items,rows:s.items,columns:n.loadedColumns})],64)):(i.openBlock(),i.createElementBlock("div",i.mergeProps({key:0,ref:n.elementRef,class:n.containerClass,tabindex:s.tabindex,style:s.style,onScroll:e[0]||(e[0]=(...t)=>n.onScroll&&n.onScroll(...t))},t.ptm("root")),[i.renderSlot(t.$slots,"content",{styleClass:n.contentClass,items:n.loadedItems,getItemOptions:n.getOptions,loading:l.d_loading,getLoaderOptions:n.getLoaderOptions,itemSize:s.itemSize,rows:n.loadedRows,columns:n.loadedColumns,contentRef:n.contentRef,spacerStyle:l.spacerStyle,contentStyle:l.contentStyle,vertical:n.isVertical(),horizontal:n.isHorizontal(),both:n.isBoth()},(()=>[i.createElementVNode("div",i.mergeProps({ref:n.contentRef,class:n.contentClass,style:l.contentStyle},t.ptm("content")),[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(n.loadedItems,((e,s)=>i.renderSlot(t.$slots,"item",{key:s,item:e,options:n.getOptions(s)}))),128))],16)])),s.showSpacer?(i.openBlock(),i.createElementBlock("div",i.mergeProps({key:0,class:"p-virtualscroller-spacer",style:l.spacerStyle},t.ptm("spacer")),null,16)):i.createCommentVNode("",!0),!s.loaderDisabled&&s.showLoader&&l.d_loading?(i.openBlock(),i.createElementBlock("div",i.mergeProps({key:1,class:n.loaderClass},t.ptm("loader")),[t.$slots&&t.$slots.loader?(i.openBlock(!0),i.createElementBlock(i.Fragment,{key:0},i.renderList(l.loaderArr,((e,s)=>i.renderSlot(t.$slots,"loader",{key:s,options:n.getLoaderOptions(s,n.isBoth()&&{numCols:t.d_numItemsInViewport.cols})}))),128)):i.createCommentVNode("",!0),i.renderSlot(t.$slots,"loadingicon",{},(()=>[i.createVNode(r,i.mergeProps({spin:"",class:"p-virtualscroller-loading-icon"},t.ptm("loadingIcon")),null,16)]))],16)):i.createCommentVNode("",!0)],16,h))},module.exports=r;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
+
import BaseComponent from 'primevue/basecomponent';
|
|
1
2
|
import SpinnerIcon from 'primevue/icons/spinner';
|
|
2
3
|
import { DomHandler } from 'primevue/utils';
|
|
3
|
-
import { resolveComponent, openBlock, createElementBlock,
|
|
4
|
+
import { resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot, createElementVNode, Fragment, renderList, createCommentVNode, createVNode } from 'vue';
|
|
4
5
|
|
|
5
6
|
var script = {
|
|
6
7
|
name: 'VirtualScroller',
|
|
8
|
+
extends: BaseComponent,
|
|
7
9
|
emits: ['update:numToleratedItems', 'scroll', 'scroll-index-change', 'lazy-load'],
|
|
8
10
|
props: {
|
|
9
11
|
id: {
|
|
@@ -712,14 +714,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
712
714
|
const _component_SpinnerIcon = resolveComponent("SpinnerIcon");
|
|
713
715
|
|
|
714
716
|
return (!$props.disabled)
|
|
715
|
-
? (openBlock(), createElementBlock("div", {
|
|
717
|
+
? (openBlock(), createElementBlock("div", mergeProps({
|
|
716
718
|
key: 0,
|
|
717
719
|
ref: $options.elementRef,
|
|
718
|
-
class:
|
|
720
|
+
class: $options.containerClass,
|
|
719
721
|
tabindex: $props.tabindex,
|
|
720
|
-
style:
|
|
722
|
+
style: $props.style,
|
|
721
723
|
onScroll: _cache[0] || (_cache[0] = (...args) => ($options.onScroll && $options.onScroll(...args)))
|
|
722
|
-
}, [
|
|
724
|
+
}, _ctx.ptm('root')), [
|
|
723
725
|
renderSlot(_ctx.$slots, "content", {
|
|
724
726
|
styleClass: $options.contentClass,
|
|
725
727
|
items: $options.loadedItems,
|
|
@@ -736,11 +738,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
736
738
|
horizontal: $options.isHorizontal(),
|
|
737
739
|
both: $options.isBoth()
|
|
738
740
|
}, () => [
|
|
739
|
-
createElementVNode("div", {
|
|
741
|
+
createElementVNode("div", mergeProps({
|
|
740
742
|
ref: $options.contentRef,
|
|
741
|
-
class:
|
|
742
|
-
style:
|
|
743
|
-
}, [
|
|
743
|
+
class: $options.contentClass,
|
|
744
|
+
style: $data.contentStyle
|
|
745
|
+
}, _ctx.ptm('content')), [
|
|
744
746
|
(openBlock(true), createElementBlock(Fragment, null, renderList($options.loadedItems, (item, index) => {
|
|
745
747
|
return renderSlot(_ctx.$slots, "item", {
|
|
746
748
|
key: index,
|
|
@@ -748,20 +750,20 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
748
750
|
options: $options.getOptions(index)
|
|
749
751
|
})
|
|
750
752
|
}), 128))
|
|
751
|
-
],
|
|
753
|
+
], 16)
|
|
752
754
|
]),
|
|
753
755
|
($props.showSpacer)
|
|
754
|
-
? (openBlock(), createElementBlock("div", {
|
|
756
|
+
? (openBlock(), createElementBlock("div", mergeProps({
|
|
755
757
|
key: 0,
|
|
756
758
|
class: "p-virtualscroller-spacer",
|
|
757
|
-
style:
|
|
758
|
-
}, null,
|
|
759
|
+
style: $data.spacerStyle
|
|
760
|
+
}, _ctx.ptm('spacer')), null, 16))
|
|
759
761
|
: createCommentVNode("", true),
|
|
760
762
|
(!$props.loaderDisabled && $props.showLoader && $data.d_loading)
|
|
761
|
-
? (openBlock(), createElementBlock("div", {
|
|
763
|
+
? (openBlock(), createElementBlock("div", mergeProps({
|
|
762
764
|
key: 1,
|
|
763
|
-
class:
|
|
764
|
-
}, [
|
|
765
|
+
class: $options.loaderClass
|
|
766
|
+
}, _ctx.ptm('loader')), [
|
|
765
767
|
(_ctx.$slots && _ctx.$slots.loader)
|
|
766
768
|
? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList($data.loaderArr, (_, index) => {
|
|
767
769
|
return renderSlot(_ctx.$slots, "loader", {
|
|
@@ -771,14 +773,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
771
773
|
}), 128))
|
|
772
774
|
: createCommentVNode("", true),
|
|
773
775
|
renderSlot(_ctx.$slots, "loadingicon", {}, () => [
|
|
774
|
-
createVNode(_component_SpinnerIcon, {
|
|
776
|
+
createVNode(_component_SpinnerIcon, mergeProps({
|
|
775
777
|
spin: "",
|
|
776
778
|
class: "p-virtualscroller-loading-icon"
|
|
777
|
-
})
|
|
779
|
+
}, _ctx.ptm('loadingIcon')), null, 16)
|
|
778
780
|
])
|
|
779
|
-
],
|
|
781
|
+
], 16))
|
|
780
782
|
: createCommentVNode("", true)
|
|
781
|
-
],
|
|
783
|
+
], 16, _hoisted_1))
|
|
782
784
|
: (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
783
785
|
renderSlot(_ctx.$slots, "default"),
|
|
784
786
|
renderSlot(_ctx.$slots, "content", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import t from"primevue/icons/spinner";import{DomHandler as e}from"primevue/utils";import{resolveComponent as s,openBlock as i,createElementBlock as o,normalizeClass as l,normalizeStyle as n,renderSlot as h,createElementVNode as r,Fragment as a,renderList as d,createCommentVNode as c,createVNode as m}from"vue";var u={name:"VirtualScroller",emits:["update:numToleratedItems","scroll","scroll-index-change","lazy-load"],props:{id:{type:String,default:null},style:null,class:null,items:{type:Array,default:null},itemSize:{type:[Number,Array],default:0},scrollHeight:null,scrollWidth:null,orientation:{type:String,default:"vertical"},numToleratedItems:{type:Number,default:null},delay:{type:Number,default:0},resizeDelay:{type:Number,default:10},lazy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loaderDisabled:{type:Boolean,default:!1},columns:{type:Array,default:null},loading:{type:Boolean,default:!1},showSpacer:{type:Boolean,default:!0},showLoader:{type:Boolean,default:!1},tabindex:{type:Number,default:0},inline:{type:Boolean,default:!1},step:{type:Number,default:0},appendOnly:{type:Boolean,default:!1},autoSize:{type:Boolean,default:!1}},data(){return{first:this.isBoth()?{rows:0,cols:0}:0,last:this.isBoth()?{rows:0,cols:0}:0,page:this.isBoth()?{rows:0,cols:0}:0,numItemsInViewport:this.isBoth()?{rows:0,cols:0}:0,lastScrollPos:this.isBoth()?{top:0,left:0}:0,d_numToleratedItems:this.numToleratedItems,d_loading:this.loading,loaderArr:[],spacerStyle:{},contentStyle:{}}},element:null,content:null,lastScrollPos:null,scrollTimeout:null,resizeTimeout:null,defaultWidth:0,defaultHeight:0,defaultContentWidth:0,defaultContentHeight:0,isRangeChanged:!1,lazyLoadState:{},resizeListener:null,initialized:!1,watch:{numToleratedItems(t){this.d_numToleratedItems=t},loading(t){this.d_loading=t},items(t,e){e&&e.length===(t||[]).length||(this.init(),this.calculateAutoSize())},itemSize(){this.init(),this.calculateAutoSize()},orientation(){this.lastScrollPos=this.isBoth()?{top:0,left:0}:0},scrollHeight(){this.init(),this.calculateAutoSize()},scrollWidth(){this.init(),this.calculateAutoSize()}},mounted(){this.viewInit(),this.lastScrollPos=this.isBoth()?{top:0,left:0}:0,this.lazyLoadState=this.lazyLoadState||{}},updated(){!this.initialized&&this.viewInit()},unmounted(){this.unbindResizeListener(),this.initialized=!1},methods:{viewInit(){e.isVisible(this.element)&&(this.setContentEl(this.content),this.init(),this.bindResizeListener(),this.defaultWidth=e.getWidth(this.element),this.defaultHeight=e.getHeight(this.element),this.defaultContentWidth=e.getWidth(this.content),this.defaultContentHeight=e.getHeight(this.content),this.initialized=!0)},init(){this.disabled||(this.setSize(),this.calculateOptions(),this.setSpacerSize())},isVertical(){return"vertical"===this.orientation},isHorizontal(){return"horizontal"===this.orientation},isBoth(){return"both"===this.orientation},scrollTo(t){this.lastScrollPos=this.both?{top:0,left:0}:0,this.element&&this.element.scrollTo(t)},scrollToIndex(t,e="auto"){const s=this.isBoth(),i=this.isHorizontal(),o=this.first,{numToleratedItems:l}=this.calculateNumItems(),n=this.getContentPosition(),h=this.itemSize,r=(t=0,e)=>t<=e?0:t,a=(t,e,s)=>t*e+s,d=(t=0,s=0)=>this.scrollTo({left:t,top:s,behavior:e});let c=s?{rows:0,cols:0}:0,m=!1;s?(c={rows:r(t[0],l[0]),cols:r(t[1],l[1])},d(a(c.cols,h[1],n.left),a(c.rows,h[0],n.top)),m=c.rows!==o.rows||c.cols!==o.cols):(c=r(t,l),i?d(a(c,h,n.left),0):d(0,a(c,h,n.top)),m=c!==o),this.isRangeChanged=m,this.first=c},scrollInView(t,e,s="auto"){if(e){const i=this.isBoth(),o=this.isHorizontal(),{first:l,viewport:n}=this.getRenderedRange(),h=(t=0,e=0)=>this.scrollTo({left:t,top:e,behavior:s}),r="to-end"===e;if("to-start"===e){if(i)n.first.rows-l.rows>t[0]?h(n.first.cols*this.itemSize[1],(n.first.rows-1)*this.itemSize[0]):n.first.cols-l.cols>t[1]&&h((n.first.cols-1)*this.itemSize[1],n.first.rows*this.itemSize[0]);else if(n.first-l>t){const t=(n.first-1)*this.itemSize;o?h(t,0):h(0,t)}}else if(r)if(i)n.last.rows-l.rows<=t[0]+1?h(n.first.cols*this.itemSize[1],(n.first.rows+1)*this.itemSize[0]):n.last.cols-l.cols<=t[1]+1&&h((n.first.cols+1)*this.itemSize[1],n.first.rows*this.itemSize[0]);else if(n.last-l<=t+1){const t=(n.first+1)*this.itemSize;o?h(t,0):h(0,t)}}else this.scrollToIndex(t,s)},getRenderedRange(){const t=(t,e)=>Math.floor(t/(e||t));let e=this.first,s=0;if(this.element){const i=this.isBoth(),o=this.isHorizontal(),{scrollTop:l,scrollLeft:n}=this.element.scrollTop;if(i)e={rows:t(l,this.itemSize[0]),cols:t(n,this.itemSize[1])},s={rows:e.rows+this.numItemsInViewport.rows,cols:e.cols+this.numItemsInViewport.cols};else{e=t(o?n:l,this.itemSize),s=e+this.numItemsInViewport}}return{first:this.first,last:this.last,viewport:{first:e,last:s}}},calculateNumItems(){const t=this.isBoth(),e=this.isHorizontal(),s=this.itemSize,i=this.getContentPosition(),o=this.element?this.element.offsetWidth-i.left:0,l=this.element?this.element.offsetHeight-i.top:0,n=(t,e)=>Math.ceil(t/(e||t)),h=t=>Math.ceil(t/2),r=t?{rows:n(l,s[0]),cols:n(o,s[1])}:n(e?o:l,s);return{numItemsInViewport:r,numToleratedItems:this.d_numToleratedItems||(t?[h(r.rows),h(r.cols)]:h(r))}},calculateOptions(){const t=this.isBoth(),e=this.first,{numItemsInViewport:s,numToleratedItems:i}=this.calculateNumItems(),o=(t,e,s,i=!1)=>this.getLast(t+e+(t<s?2:3)*s,i),l=t?{rows:o(e.rows,s.rows,i[0]),cols:o(e.cols,s.cols,i[1],!0)}:o(e,s,i);this.last=l,this.numItemsInViewport=s,this.d_numToleratedItems=i,this.$emit("update:numToleratedItems",this.d_numToleratedItems),this.showLoader&&(this.loaderArr=t?Array.from({length:s.rows}).map((()=>Array.from({length:s.cols}))):Array.from({length:s})),this.lazy&&Promise.resolve().then((()=>{this.lazyLoadState={first:this.step?t?{rows:0,cols:e.cols}:0:e,last:Math.min(this.step?this.step:l,this.items.length)},this.$emit("lazy-load",this.lazyLoadState)}))},calculateAutoSize(){this.autoSize&&!this.d_loading&&Promise.resolve().then((()=>{if(this.content){const t=this.isBoth(),s=this.isHorizontal(),i=this.isVertical();this.content.style.minHeight=this.content.style.minWidth="auto",this.content.style.position="relative",this.element.style.contain="none";const[o,l]=[e.getWidth(this.content),e.getHeight(this.content)];o!==this.defaultContentWidth&&(this.element.style.width=""),l!==this.defaultContentHeight&&(this.element.style.height="");const[n,h]=[e.getWidth(this.element),e.getHeight(this.element)];(t||s)&&(this.element.style.width=n<this.defaultWidth?n+"px":this.scrollWidth||this.defaultWidth+"px"),(t||i)&&(this.element.style.height=h<this.defaultHeight?h+"px":this.scrollHeight||this.defaultHeight+"px"),this.content.style.minHeight=this.content.style.minWidth="",this.content.style.position="",this.element.style.contain=""}}))},getLast(t=0,e){return this.items?Math.min(e?(this.columns||this.items[0]).length:this.items.length,t):0},getContentPosition(){if(this.content){const t=getComputedStyle(this.content),e=parseFloat(t.paddingLeft)+Math.max(parseFloat(t.left)||0,0),s=parseFloat(t.paddingRight)+Math.max(parseFloat(t.right)||0,0),i=parseFloat(t.paddingTop)+Math.max(parseFloat(t.top)||0,0),o=parseFloat(t.paddingBottom)+Math.max(parseFloat(t.bottom)||0,0);return{left:e,right:s,top:i,bottom:o,x:e+s,y:i+o}}return{left:0,right:0,top:0,bottom:0,x:0,y:0}},setSize(){if(this.element){const t=this.isBoth(),e=this.isHorizontal(),s=this.element.parentElement,i=this.scrollWidth||`${this.element.offsetWidth||s.offsetWidth}px`,o=this.scrollHeight||`${this.element.offsetHeight||s.offsetHeight}px`,l=(t,e)=>this.element.style[t]=e;t||e?(l("height",o),l("width",i)):l("height",o)}},setSpacerSize(){const t=this.items;if(t){const e=this.isBoth(),s=this.isHorizontal(),i=this.getContentPosition(),o=(t,e,s,i=0)=>this.spacerStyle={...this.spacerStyle,[`${t}`]:(e||[]).length*s+i+"px"};e?(o("height",t,this.itemSize[0],i.y),o("width",this.columns||t[1],this.itemSize[1],i.x)):s?o("width",this.columns||t,this.itemSize,i.x):o("height",t,this.itemSize,i.y)}},setContentPosition(t){if(this.content&&!this.appendOnly){const e=this.isBoth(),s=this.isHorizontal(),i=t?t.first:this.first,o=(t,e)=>t*e,l=(t=0,e=0)=>this.contentStyle={...this.contentStyle,transform:`translate3d(${t}px, ${e}px, 0)`};if(e)l(o(i.cols,this.itemSize[1]),o(i.rows,this.itemSize[0]));else{const t=o(i,this.itemSize);s?l(t,0):l(0,t)}}},onScrollPositionChange(t){const e=t.target,s=this.isBoth(),i=this.isHorizontal(),o=this.getContentPosition(),l=(t,e)=>t?t>e?t-e:t:0,n=(t,e)=>Math.floor(t/(e||t)),h=(t,e,s,i,o,l)=>t<=o?o:l?s-i-o:e+o-1,r=(t,e,s,i,o,l,n)=>t<=l?0:Math.max(0,n?t<e?s:t-l:t>e?s:t-2*l),a=(t,e,s,i,o,l)=>{let n=e+i+2*o;return t>=o&&(n+=o+1),this.getLast(n,l)},d=l(e.scrollTop,o.top),c=l(e.scrollLeft,o.left);let m=s?{rows:0,cols:0}:0,u=this.last,p=!1,f=this.lastScrollPos;if(s){const t=this.lastScrollPos.top<=d,e=this.lastScrollPos.left<=c;if(!this.appendOnly||this.appendOnly&&(t||e)){const s={rows:n(d,this.itemSize[0]),cols:n(c,this.itemSize[1])},i={rows:h(s.rows,this.first.rows,this.last.rows,this.numItemsInViewport.rows,this.d_numToleratedItems[0],t),cols:h(s.cols,this.first.cols,this.last.cols,this.numItemsInViewport.cols,this.d_numToleratedItems[1],e)};m={rows:r(s.rows,i.rows,this.first.rows,this.last.rows,this.numItemsInViewport.rows,this.d_numToleratedItems[0],t),cols:r(s.cols,i.cols,this.first.cols,this.last.cols,this.numItemsInViewport.cols,this.d_numToleratedItems[1],e)},u={rows:a(s.rows,m.rows,this.last.rows,this.numItemsInViewport.rows,this.d_numToleratedItems[0]),cols:a(s.cols,m.cols,this.last.cols,this.numItemsInViewport.cols,this.d_numToleratedItems[1],!0)},p=m.rows!==this.first.rows||u.rows!==this.last.rows||m.cols!==this.first.cols||u.cols!==this.last.cols||this.isRangeChanged,f={top:d,left:c}}}else{const t=i?c:d,e=this.lastScrollPos<=t;if(!this.appendOnly||this.appendOnly&&e){const s=n(t,this.itemSize);m=r(s,h(s,this.first,this.last,this.numItemsInViewport,this.d_numToleratedItems,e),this.first,this.last,this.numItemsInViewport,this.d_numToleratedItems,e),u=a(s,m,this.last,this.numItemsInViewport,this.d_numToleratedItems),p=m!==this.first||u!==this.last||this.isRangeChanged,f=t}}return{first:m,last:u,isRangeChanged:p,scrollPos:f}},onScrollChange(t){const{first:e,last:s,isRangeChanged:i,scrollPos:o}=this.onScrollPositionChange(t);if(i){const t={first:e,last:s};if(this.setContentPosition(t),this.first=e,this.last=s,this.lastScrollPos=o,this.$emit("scroll-index-change",t),this.lazy&&this.isPageChanged(e)){const t={first:this.step?Math.min(this.getPageByFirst(e)*this.step,this.items.length-this.step):e,last:Math.min(this.step?(this.getPageByFirst(e)+1)*this.step:s,this.items.length)};(this.lazyLoadState.first!==t.first||this.lazyLoadState.last!==t.last)&&this.$emit("lazy-load",t),this.lazyLoadState=t}}},onScroll(t){if(this.$emit("scroll",t),this.delay&&this.isPageChanged()){if(this.scrollTimeout&&clearTimeout(this.scrollTimeout),!this.d_loading&&this.showLoader){const{isRangeChanged:e}=this.onScrollPositionChange(t);(e||!!this.step&&this.isPageChanged())&&(this.d_loading=!0)}this.scrollTimeout=setTimeout((()=>{this.onScrollChange(t),!this.d_loading||!this.showLoader||this.lazy&&void 0!==this.loading||(this.d_loading=!1,this.page=this.getPageByFirst())}),this.delay)}else this.onScrollChange(t)},onResize(){this.resizeTimeout&&clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout((()=>{if(e.isVisible(this.element)){const t=this.isBoth(),s=this.isVertical(),i=this.isHorizontal(),[o,l]=[e.getWidth(this.element),e.getHeight(this.element)],[n,h]=[o!==this.defaultWidth,l!==this.defaultHeight];(t?n||h:i?n:!!s&&h)&&(this.d_numToleratedItems=this.numToleratedItems,this.defaultWidth=o,this.defaultHeight=l,this.defaultContentWidth=e.getWidth(this.content),this.defaultContentHeight=e.getHeight(this.content),this.init())}}),this.resizeDelay)},bindResizeListener(){this.resizeListener||(this.resizeListener=this.onResize.bind(this),window.addEventListener("resize",this.resizeListener),window.addEventListener("orientationchange",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),window.removeEventListener("orientationchange",this.resizeListener),this.resizeListener=null)},getOptions(t){const e=(this.items||[]).length,s=this.isBoth()?this.first.rows+t:this.first+t;return{index:s,count:e,first:0===s,last:s===e-1,even:s%2==0,odd:s%2!=0}},getLoaderOptions(t,e){let s=this.loaderArr.length;return{index:t,count:s,first:0===t,last:t===s-1,even:t%2==0,odd:t%2!=0,...e}},getPageByFirst(t){return Math.floor(((t??this.first)+4*this.d_numToleratedItems)/(this.step||1))},isPageChanged(t){return!this.step||this.page!==this.getPageByFirst(t??this.first)},setContentEl(t){this.content=t||this.content||e.findSingle(this.element,".p-virtualscroller-content")},elementRef(t){this.element=t},contentRef(t){this.content=t}},computed:{containerClass(){return["p-virtualscroller",{"p-virtualscroller-inline":this.inline,"p-virtualscroller-both p-both-scroll":this.isBoth(),"p-virtualscroller-horizontal p-horizontal-scroll":this.isHorizontal()},this.class]},contentClass(){return["p-virtualscroller-content",{"p-virtualscroller-loading":this.d_loading}]},loaderClass(){return["p-virtualscroller-loader",{"p-component-overlay":!this.$slots.loader}]},loadedItems(){return this.items&&!this.d_loading?this.isBoth()?this.items.slice(this.appendOnly?0:this.first.rows,this.last.rows).map((t=>this.columns?t:t.slice(this.appendOnly?0:this.first.cols,this.last.cols))):this.isHorizontal()&&this.columns?this.items:this.items.slice(this.appendOnly?0:this.first,this.last):[]},loadedRows(){return this.d_loading?this.loaderDisabled?this.loaderArr:[]:this.loadedItems},loadedColumns(){if(this.columns){const t=this.isBoth(),e=this.isHorizontal();if(t||e)return this.d_loading&&this.loaderDisabled?t?this.loaderArr[0]:this.loaderArr:this.columns.slice(t?this.first.cols:this.first,t?this.last.cols:this.last)}return this.columns}},components:{SpinnerIcon:t}};const p=["tabindex"];!function(t,e){void 0===e&&(e={});var s=e.insertAt;if(t&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===s&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}("\n.p-virtualscroller {\n position: relative;\n overflow: auto;\n contain: strict;\n transform: translateZ(0);\n will-change: scroll-position;\n outline: 0 none;\n}\n.p-virtualscroller-content {\n position: absolute;\n top: 0;\n left: 0;\n /* contain: content; */\n min-height: 100%;\n min-width: 100%;\n will-change: transform;\n}\n.p-virtualscroller-spacer {\n position: absolute;\n top: 0;\n left: 0;\n height: 1px;\n width: 1px;\n transform-origin: 0 0;\n pointer-events: none;\n}\n.p-virtualscroller .p-virtualscroller-loader {\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n.p-virtualscroller-loader.p-component-overlay {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.p-virtualscroller-loading-icon {\n font-size: 2rem;\n}\n.p-virtualscroller-loading-icon.p-icon {\n width: 2rem;\n height: 2rem;\n}\n.p-virtualscroller-horizontal > .p-virtualscroller-content {\n display: flex;\n}\n\n/* Inline */\n.p-virtualscroller-inline .p-virtualscroller-content {\n position: static;\n}\n"),u.render=function(t,e,u,f,g,y){const w=s("SpinnerIcon");return u.disabled?(i(),o(a,{key:1},[h(t.$slots,"default"),h(t.$slots,"content",{items:u.items,rows:u.items,columns:y.loadedColumns})],64)):(i(),o("div",{key:0,ref:y.elementRef,class:l(y.containerClass),tabindex:u.tabindex,style:n(u.style),onScroll:e[0]||(e[0]=(...t)=>y.onScroll&&y.onScroll(...t))},[h(t.$slots,"content",{styleClass:y.contentClass,items:y.loadedItems,getItemOptions:y.getOptions,loading:g.d_loading,getLoaderOptions:y.getLoaderOptions,itemSize:u.itemSize,rows:y.loadedRows,columns:y.loadedColumns,contentRef:y.contentRef,spacerStyle:g.spacerStyle,contentStyle:g.contentStyle,vertical:y.isVertical(),horizontal:y.isHorizontal(),both:y.isBoth()},(()=>[r("div",{ref:y.contentRef,class:l(y.contentClass),style:n(g.contentStyle)},[(i(!0),o(a,null,d(y.loadedItems,((e,s)=>h(t.$slots,"item",{key:s,item:e,options:y.getOptions(s)}))),128))],6)])),u.showSpacer?(i(),o("div",{key:0,class:"p-virtualscroller-spacer",style:n(g.spacerStyle)},null,4)):c("",!0),!u.loaderDisabled&&u.showLoader&&g.d_loading?(i(),o("div",{key:1,class:l(y.loaderClass)},[t.$slots&&t.$slots.loader?(i(!0),o(a,{key:0},d(g.loaderArr,((e,s)=>h(t.$slots,"loader",{key:s,options:y.getLoaderOptions(s,y.isBoth()&&{numCols:t.d_numItemsInViewport.cols})}))),128)):c("",!0),h(t.$slots,"loadingicon",{},(()=>[m(w,{spin:"",class:"p-virtualscroller-loading-icon"})]))],2)):c("",!0)],46,p))};export{u as default};
|
|
1
|
+
import t from"primevue/basecomponent";import e from"primevue/icons/spinner";import{DomHandler as s}from"primevue/utils";import{resolveComponent as i,openBlock as o,createElementBlock as l,mergeProps as n,renderSlot as h,createElementVNode as r,Fragment as a,renderList as d,createCommentVNode as c,createVNode as m}from"vue";var u={name:"VirtualScroller",extends:t,emits:["update:numToleratedItems","scroll","scroll-index-change","lazy-load"],props:{id:{type:String,default:null},style:null,class:null,items:{type:Array,default:null},itemSize:{type:[Number,Array],default:0},scrollHeight:null,scrollWidth:null,orientation:{type:String,default:"vertical"},numToleratedItems:{type:Number,default:null},delay:{type:Number,default:0},resizeDelay:{type:Number,default:10},lazy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loaderDisabled:{type:Boolean,default:!1},columns:{type:Array,default:null},loading:{type:Boolean,default:!1},showSpacer:{type:Boolean,default:!0},showLoader:{type:Boolean,default:!1},tabindex:{type:Number,default:0},inline:{type:Boolean,default:!1},step:{type:Number,default:0},appendOnly:{type:Boolean,default:!1},autoSize:{type:Boolean,default:!1}},data(){return{first:this.isBoth()?{rows:0,cols:0}:0,last:this.isBoth()?{rows:0,cols:0}:0,page:this.isBoth()?{rows:0,cols:0}:0,numItemsInViewport:this.isBoth()?{rows:0,cols:0}:0,lastScrollPos:this.isBoth()?{top:0,left:0}:0,d_numToleratedItems:this.numToleratedItems,d_loading:this.loading,loaderArr:[],spacerStyle:{},contentStyle:{}}},element:null,content:null,lastScrollPos:null,scrollTimeout:null,resizeTimeout:null,defaultWidth:0,defaultHeight:0,defaultContentWidth:0,defaultContentHeight:0,isRangeChanged:!1,lazyLoadState:{},resizeListener:null,initialized:!1,watch:{numToleratedItems(t){this.d_numToleratedItems=t},loading(t){this.d_loading=t},items(t,e){e&&e.length===(t||[]).length||(this.init(),this.calculateAutoSize())},itemSize(){this.init(),this.calculateAutoSize()},orientation(){this.lastScrollPos=this.isBoth()?{top:0,left:0}:0},scrollHeight(){this.init(),this.calculateAutoSize()},scrollWidth(){this.init(),this.calculateAutoSize()}},mounted(){this.viewInit(),this.lastScrollPos=this.isBoth()?{top:0,left:0}:0,this.lazyLoadState=this.lazyLoadState||{}},updated(){!this.initialized&&this.viewInit()},unmounted(){this.unbindResizeListener(),this.initialized=!1},methods:{viewInit(){s.isVisible(this.element)&&(this.setContentEl(this.content),this.init(),this.bindResizeListener(),this.defaultWidth=s.getWidth(this.element),this.defaultHeight=s.getHeight(this.element),this.defaultContentWidth=s.getWidth(this.content),this.defaultContentHeight=s.getHeight(this.content),this.initialized=!0)},init(){this.disabled||(this.setSize(),this.calculateOptions(),this.setSpacerSize())},isVertical(){return"vertical"===this.orientation},isHorizontal(){return"horizontal"===this.orientation},isBoth(){return"both"===this.orientation},scrollTo(t){this.lastScrollPos=this.both?{top:0,left:0}:0,this.element&&this.element.scrollTo(t)},scrollToIndex(t,e="auto"){const s=this.isBoth(),i=this.isHorizontal(),o=this.first,{numToleratedItems:l}=this.calculateNumItems(),n=this.getContentPosition(),h=this.itemSize,r=(t=0,e)=>t<=e?0:t,a=(t,e,s)=>t*e+s,d=(t=0,s=0)=>this.scrollTo({left:t,top:s,behavior:e});let c=s?{rows:0,cols:0}:0,m=!1;s?(c={rows:r(t[0],l[0]),cols:r(t[1],l[1])},d(a(c.cols,h[1],n.left),a(c.rows,h[0],n.top)),m=c.rows!==o.rows||c.cols!==o.cols):(c=r(t,l),i?d(a(c,h,n.left),0):d(0,a(c,h,n.top)),m=c!==o),this.isRangeChanged=m,this.first=c},scrollInView(t,e,s="auto"){if(e){const i=this.isBoth(),o=this.isHorizontal(),{first:l,viewport:n}=this.getRenderedRange(),h=(t=0,e=0)=>this.scrollTo({left:t,top:e,behavior:s}),r="to-end"===e;if("to-start"===e){if(i)n.first.rows-l.rows>t[0]?h(n.first.cols*this.itemSize[1],(n.first.rows-1)*this.itemSize[0]):n.first.cols-l.cols>t[1]&&h((n.first.cols-1)*this.itemSize[1],n.first.rows*this.itemSize[0]);else if(n.first-l>t){const t=(n.first-1)*this.itemSize;o?h(t,0):h(0,t)}}else if(r)if(i)n.last.rows-l.rows<=t[0]+1?h(n.first.cols*this.itemSize[1],(n.first.rows+1)*this.itemSize[0]):n.last.cols-l.cols<=t[1]+1&&h((n.first.cols+1)*this.itemSize[1],n.first.rows*this.itemSize[0]);else if(n.last-l<=t+1){const t=(n.first+1)*this.itemSize;o?h(t,0):h(0,t)}}else this.scrollToIndex(t,s)},getRenderedRange(){const t=(t,e)=>Math.floor(t/(e||t));let e=this.first,s=0;if(this.element){const i=this.isBoth(),o=this.isHorizontal(),{scrollTop:l,scrollLeft:n}=this.element.scrollTop;if(i)e={rows:t(l,this.itemSize[0]),cols:t(n,this.itemSize[1])},s={rows:e.rows+this.numItemsInViewport.rows,cols:e.cols+this.numItemsInViewport.cols};else{e=t(o?n:l,this.itemSize),s=e+this.numItemsInViewport}}return{first:this.first,last:this.last,viewport:{first:e,last:s}}},calculateNumItems(){const t=this.isBoth(),e=this.isHorizontal(),s=this.itemSize,i=this.getContentPosition(),o=this.element?this.element.offsetWidth-i.left:0,l=this.element?this.element.offsetHeight-i.top:0,n=(t,e)=>Math.ceil(t/(e||t)),h=t=>Math.ceil(t/2),r=t?{rows:n(l,s[0]),cols:n(o,s[1])}:n(e?o:l,s);return{numItemsInViewport:r,numToleratedItems:this.d_numToleratedItems||(t?[h(r.rows),h(r.cols)]:h(r))}},calculateOptions(){const t=this.isBoth(),e=this.first,{numItemsInViewport:s,numToleratedItems:i}=this.calculateNumItems(),o=(t,e,s,i=!1)=>this.getLast(t+e+(t<s?2:3)*s,i),l=t?{rows:o(e.rows,s.rows,i[0]),cols:o(e.cols,s.cols,i[1],!0)}:o(e,s,i);this.last=l,this.numItemsInViewport=s,this.d_numToleratedItems=i,this.$emit("update:numToleratedItems",this.d_numToleratedItems),this.showLoader&&(this.loaderArr=t?Array.from({length:s.rows}).map((()=>Array.from({length:s.cols}))):Array.from({length:s})),this.lazy&&Promise.resolve().then((()=>{this.lazyLoadState={first:this.step?t?{rows:0,cols:e.cols}:0:e,last:Math.min(this.step?this.step:l,this.items.length)},this.$emit("lazy-load",this.lazyLoadState)}))},calculateAutoSize(){this.autoSize&&!this.d_loading&&Promise.resolve().then((()=>{if(this.content){const t=this.isBoth(),e=this.isHorizontal(),i=this.isVertical();this.content.style.minHeight=this.content.style.minWidth="auto",this.content.style.position="relative",this.element.style.contain="none";const[o,l]=[s.getWidth(this.content),s.getHeight(this.content)];o!==this.defaultContentWidth&&(this.element.style.width=""),l!==this.defaultContentHeight&&(this.element.style.height="");const[n,h]=[s.getWidth(this.element),s.getHeight(this.element)];(t||e)&&(this.element.style.width=n<this.defaultWidth?n+"px":this.scrollWidth||this.defaultWidth+"px"),(t||i)&&(this.element.style.height=h<this.defaultHeight?h+"px":this.scrollHeight||this.defaultHeight+"px"),this.content.style.minHeight=this.content.style.minWidth="",this.content.style.position="",this.element.style.contain=""}}))},getLast(t=0,e){return this.items?Math.min(e?(this.columns||this.items[0]).length:this.items.length,t):0},getContentPosition(){if(this.content){const t=getComputedStyle(this.content),e=parseFloat(t.paddingLeft)+Math.max(parseFloat(t.left)||0,0),s=parseFloat(t.paddingRight)+Math.max(parseFloat(t.right)||0,0),i=parseFloat(t.paddingTop)+Math.max(parseFloat(t.top)||0,0),o=parseFloat(t.paddingBottom)+Math.max(parseFloat(t.bottom)||0,0);return{left:e,right:s,top:i,bottom:o,x:e+s,y:i+o}}return{left:0,right:0,top:0,bottom:0,x:0,y:0}},setSize(){if(this.element){const t=this.isBoth(),e=this.isHorizontal(),s=this.element.parentElement,i=this.scrollWidth||`${this.element.offsetWidth||s.offsetWidth}px`,o=this.scrollHeight||`${this.element.offsetHeight||s.offsetHeight}px`,l=(t,e)=>this.element.style[t]=e;t||e?(l("height",o),l("width",i)):l("height",o)}},setSpacerSize(){const t=this.items;if(t){const e=this.isBoth(),s=this.isHorizontal(),i=this.getContentPosition(),o=(t,e,s,i=0)=>this.spacerStyle={...this.spacerStyle,[`${t}`]:(e||[]).length*s+i+"px"};e?(o("height",t,this.itemSize[0],i.y),o("width",this.columns||t[1],this.itemSize[1],i.x)):s?o("width",this.columns||t,this.itemSize,i.x):o("height",t,this.itemSize,i.y)}},setContentPosition(t){if(this.content&&!this.appendOnly){const e=this.isBoth(),s=this.isHorizontal(),i=t?t.first:this.first,o=(t,e)=>t*e,l=(t=0,e=0)=>this.contentStyle={...this.contentStyle,transform:`translate3d(${t}px, ${e}px, 0)`};if(e)l(o(i.cols,this.itemSize[1]),o(i.rows,this.itemSize[0]));else{const t=o(i,this.itemSize);s?l(t,0):l(0,t)}}},onScrollPositionChange(t){const e=t.target,s=this.isBoth(),i=this.isHorizontal(),o=this.getContentPosition(),l=(t,e)=>t?t>e?t-e:t:0,n=(t,e)=>Math.floor(t/(e||t)),h=(t,e,s,i,o,l)=>t<=o?o:l?s-i-o:e+o-1,r=(t,e,s,i,o,l,n)=>t<=l?0:Math.max(0,n?t<e?s:t-l:t>e?s:t-2*l),a=(t,e,s,i,o,l)=>{let n=e+i+2*o;return t>=o&&(n+=o+1),this.getLast(n,l)},d=l(e.scrollTop,o.top),c=l(e.scrollLeft,o.left);let m=s?{rows:0,cols:0}:0,u=this.last,p=!1,f=this.lastScrollPos;if(s){const t=this.lastScrollPos.top<=d,e=this.lastScrollPos.left<=c;if(!this.appendOnly||this.appendOnly&&(t||e)){const s={rows:n(d,this.itemSize[0]),cols:n(c,this.itemSize[1])},i={rows:h(s.rows,this.first.rows,this.last.rows,this.numItemsInViewport.rows,this.d_numToleratedItems[0],t),cols:h(s.cols,this.first.cols,this.last.cols,this.numItemsInViewport.cols,this.d_numToleratedItems[1],e)};m={rows:r(s.rows,i.rows,this.first.rows,this.last.rows,this.numItemsInViewport.rows,this.d_numToleratedItems[0],t),cols:r(s.cols,i.cols,this.first.cols,this.last.cols,this.numItemsInViewport.cols,this.d_numToleratedItems[1],e)},u={rows:a(s.rows,m.rows,this.last.rows,this.numItemsInViewport.rows,this.d_numToleratedItems[0]),cols:a(s.cols,m.cols,this.last.cols,this.numItemsInViewport.cols,this.d_numToleratedItems[1],!0)},p=m.rows!==this.first.rows||u.rows!==this.last.rows||m.cols!==this.first.cols||u.cols!==this.last.cols||this.isRangeChanged,f={top:d,left:c}}}else{const t=i?c:d,e=this.lastScrollPos<=t;if(!this.appendOnly||this.appendOnly&&e){const s=n(t,this.itemSize);m=r(s,h(s,this.first,this.last,this.numItemsInViewport,this.d_numToleratedItems,e),this.first,this.last,this.numItemsInViewport,this.d_numToleratedItems,e),u=a(s,m,this.last,this.numItemsInViewport,this.d_numToleratedItems),p=m!==this.first||u!==this.last||this.isRangeChanged,f=t}}return{first:m,last:u,isRangeChanged:p,scrollPos:f}},onScrollChange(t){const{first:e,last:s,isRangeChanged:i,scrollPos:o}=this.onScrollPositionChange(t);if(i){const t={first:e,last:s};if(this.setContentPosition(t),this.first=e,this.last=s,this.lastScrollPos=o,this.$emit("scroll-index-change",t),this.lazy&&this.isPageChanged(e)){const t={first:this.step?Math.min(this.getPageByFirst(e)*this.step,this.items.length-this.step):e,last:Math.min(this.step?(this.getPageByFirst(e)+1)*this.step:s,this.items.length)};(this.lazyLoadState.first!==t.first||this.lazyLoadState.last!==t.last)&&this.$emit("lazy-load",t),this.lazyLoadState=t}}},onScroll(t){if(this.$emit("scroll",t),this.delay&&this.isPageChanged()){if(this.scrollTimeout&&clearTimeout(this.scrollTimeout),!this.d_loading&&this.showLoader){const{isRangeChanged:e}=this.onScrollPositionChange(t);(e||!!this.step&&this.isPageChanged())&&(this.d_loading=!0)}this.scrollTimeout=setTimeout((()=>{this.onScrollChange(t),!this.d_loading||!this.showLoader||this.lazy&&void 0!==this.loading||(this.d_loading=!1,this.page=this.getPageByFirst())}),this.delay)}else this.onScrollChange(t)},onResize(){this.resizeTimeout&&clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout((()=>{if(s.isVisible(this.element)){const t=this.isBoth(),e=this.isVertical(),i=this.isHorizontal(),[o,l]=[s.getWidth(this.element),s.getHeight(this.element)],[n,h]=[o!==this.defaultWidth,l!==this.defaultHeight];(t?n||h:i?n:!!e&&h)&&(this.d_numToleratedItems=this.numToleratedItems,this.defaultWidth=o,this.defaultHeight=l,this.defaultContentWidth=s.getWidth(this.content),this.defaultContentHeight=s.getHeight(this.content),this.init())}}),this.resizeDelay)},bindResizeListener(){this.resizeListener||(this.resizeListener=this.onResize.bind(this),window.addEventListener("resize",this.resizeListener),window.addEventListener("orientationchange",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),window.removeEventListener("orientationchange",this.resizeListener),this.resizeListener=null)},getOptions(t){const e=(this.items||[]).length,s=this.isBoth()?this.first.rows+t:this.first+t;return{index:s,count:e,first:0===s,last:s===e-1,even:s%2==0,odd:s%2!=0}},getLoaderOptions(t,e){let s=this.loaderArr.length;return{index:t,count:s,first:0===t,last:t===s-1,even:t%2==0,odd:t%2!=0,...e}},getPageByFirst(t){return Math.floor(((t??this.first)+4*this.d_numToleratedItems)/(this.step||1))},isPageChanged(t){return!this.step||this.page!==this.getPageByFirst(t??this.first)},setContentEl(t){this.content=t||this.content||s.findSingle(this.element,".p-virtualscroller-content")},elementRef(t){this.element=t},contentRef(t){this.content=t}},computed:{containerClass(){return["p-virtualscroller",{"p-virtualscroller-inline":this.inline,"p-virtualscroller-both p-both-scroll":this.isBoth(),"p-virtualscroller-horizontal p-horizontal-scroll":this.isHorizontal()},this.class]},contentClass(){return["p-virtualscroller-content",{"p-virtualscroller-loading":this.d_loading}]},loaderClass(){return["p-virtualscroller-loader",{"p-component-overlay":!this.$slots.loader}]},loadedItems(){return this.items&&!this.d_loading?this.isBoth()?this.items.slice(this.appendOnly?0:this.first.rows,this.last.rows).map((t=>this.columns?t:t.slice(this.appendOnly?0:this.first.cols,this.last.cols))):this.isHorizontal()&&this.columns?this.items:this.items.slice(this.appendOnly?0:this.first,this.last):[]},loadedRows(){return this.d_loading?this.loaderDisabled?this.loaderArr:[]:this.loadedItems},loadedColumns(){if(this.columns){const t=this.isBoth(),e=this.isHorizontal();if(t||e)return this.d_loading&&this.loaderDisabled?t?this.loaderArr[0]:this.loaderArr:this.columns.slice(t?this.first.cols:this.first,t?this.last.cols:this.last)}return this.columns}},components:{SpinnerIcon:e}};const p=["tabindex"];!function(t,e){void 0===e&&(e={});var s=e.insertAt;if(t&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===s&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}("\n.p-virtualscroller {\n position: relative;\n overflow: auto;\n contain: strict;\n transform: translateZ(0);\n will-change: scroll-position;\n outline: 0 none;\n}\n.p-virtualscroller-content {\n position: absolute;\n top: 0;\n left: 0;\n /* contain: content; */\n min-height: 100%;\n min-width: 100%;\n will-change: transform;\n}\n.p-virtualscroller-spacer {\n position: absolute;\n top: 0;\n left: 0;\n height: 1px;\n width: 1px;\n transform-origin: 0 0;\n pointer-events: none;\n}\n.p-virtualscroller .p-virtualscroller-loader {\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n.p-virtualscroller-loader.p-component-overlay {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.p-virtualscroller-loading-icon {\n font-size: 2rem;\n}\n.p-virtualscroller-loading-icon.p-icon {\n width: 2rem;\n height: 2rem;\n}\n.p-virtualscroller-horizontal > .p-virtualscroller-content {\n display: flex;\n}\n\n/* Inline */\n.p-virtualscroller-inline .p-virtualscroller-content {\n position: static;\n}\n"),u.render=function(t,e,s,u,f,g){const y=i("SpinnerIcon");return s.disabled?(o(),l(a,{key:1},[h(t.$slots,"default"),h(t.$slots,"content",{items:s.items,rows:s.items,columns:g.loadedColumns})],64)):(o(),l("div",n({key:0,ref:g.elementRef,class:g.containerClass,tabindex:s.tabindex,style:s.style,onScroll:e[0]||(e[0]=(...t)=>g.onScroll&&g.onScroll(...t))},t.ptm("root")),[h(t.$slots,"content",{styleClass:g.contentClass,items:g.loadedItems,getItemOptions:g.getOptions,loading:f.d_loading,getLoaderOptions:g.getLoaderOptions,itemSize:s.itemSize,rows:g.loadedRows,columns:g.loadedColumns,contentRef:g.contentRef,spacerStyle:f.spacerStyle,contentStyle:f.contentStyle,vertical:g.isVertical(),horizontal:g.isHorizontal(),both:g.isBoth()},(()=>[r("div",n({ref:g.contentRef,class:g.contentClass,style:f.contentStyle},t.ptm("content")),[(o(!0),l(a,null,d(g.loadedItems,((e,s)=>h(t.$slots,"item",{key:s,item:e,options:g.getOptions(s)}))),128))],16)])),s.showSpacer?(o(),l("div",n({key:0,class:"p-virtualscroller-spacer",style:f.spacerStyle},t.ptm("spacer")),null,16)):c("",!0),!s.loaderDisabled&&s.showLoader&&f.d_loading?(o(),l("div",n({key:1,class:g.loaderClass},t.ptm("loader")),[t.$slots&&t.$slots.loader?(o(!0),l(a,{key:0},d(f.loaderArr,((e,s)=>h(t.$slots,"loader",{key:s,options:g.getLoaderOptions(s,g.isBoth()&&{numCols:t.d_numItemsInViewport.cols})}))),128)):c("",!0),h(t.$slots,"loadingicon",{},(()=>[m(y,n({spin:"",class:"p-virtualscroller-loading-icon"},t.ptm("loadingIcon")),null,16)]))],16)):c("",!0)],16,p))};export{u as default};
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
this.primevue = this.primevue || {};
|
|
2
|
-
this.primevue.virtualscroller = (function (SpinnerIcon, utils, vue) {
|
|
2
|
+
this.primevue.virtualscroller = (function (BaseComponent, SpinnerIcon, utils, vue) {
|
|
3
3
|
'use strict';
|
|
4
4
|
|
|
5
5
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
6
6
|
|
|
7
|
+
var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
|
|
7
8
|
var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
|
|
8
9
|
|
|
9
10
|
var script = {
|
|
10
11
|
name: 'VirtualScroller',
|
|
12
|
+
extends: BaseComponent__default["default"],
|
|
11
13
|
emits: ['update:numToleratedItems', 'scroll', 'scroll-index-change', 'lazy-load'],
|
|
12
14
|
props: {
|
|
13
15
|
id: {
|
|
@@ -716,14 +718,14 @@ this.primevue.virtualscroller = (function (SpinnerIcon, utils, vue) {
|
|
|
716
718
|
const _component_SpinnerIcon = vue.resolveComponent("SpinnerIcon");
|
|
717
719
|
|
|
718
720
|
return (!$props.disabled)
|
|
719
|
-
? (vue.openBlock(), vue.createElementBlock("div", {
|
|
721
|
+
? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
|
|
720
722
|
key: 0,
|
|
721
723
|
ref: $options.elementRef,
|
|
722
|
-
class:
|
|
724
|
+
class: $options.containerClass,
|
|
723
725
|
tabindex: $props.tabindex,
|
|
724
|
-
style:
|
|
726
|
+
style: $props.style,
|
|
725
727
|
onScroll: _cache[0] || (_cache[0] = (...args) => ($options.onScroll && $options.onScroll(...args)))
|
|
726
|
-
}, [
|
|
728
|
+
}, _ctx.ptm('root')), [
|
|
727
729
|
vue.renderSlot(_ctx.$slots, "content", {
|
|
728
730
|
styleClass: $options.contentClass,
|
|
729
731
|
items: $options.loadedItems,
|
|
@@ -740,11 +742,11 @@ this.primevue.virtualscroller = (function (SpinnerIcon, utils, vue) {
|
|
|
740
742
|
horizontal: $options.isHorizontal(),
|
|
741
743
|
both: $options.isBoth()
|
|
742
744
|
}, () => [
|
|
743
|
-
vue.createElementVNode("div", {
|
|
745
|
+
vue.createElementVNode("div", vue.mergeProps({
|
|
744
746
|
ref: $options.contentRef,
|
|
745
|
-
class:
|
|
746
|
-
style:
|
|
747
|
-
}, [
|
|
747
|
+
class: $options.contentClass,
|
|
748
|
+
style: $data.contentStyle
|
|
749
|
+
}, _ctx.ptm('content')), [
|
|
748
750
|
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.loadedItems, (item, index) => {
|
|
749
751
|
return vue.renderSlot(_ctx.$slots, "item", {
|
|
750
752
|
key: index,
|
|
@@ -752,20 +754,20 @@ this.primevue.virtualscroller = (function (SpinnerIcon, utils, vue) {
|
|
|
752
754
|
options: $options.getOptions(index)
|
|
753
755
|
})
|
|
754
756
|
}), 128))
|
|
755
|
-
],
|
|
757
|
+
], 16)
|
|
756
758
|
]),
|
|
757
759
|
($props.showSpacer)
|
|
758
|
-
? (vue.openBlock(), vue.createElementBlock("div", {
|
|
760
|
+
? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
|
|
759
761
|
key: 0,
|
|
760
762
|
class: "p-virtualscroller-spacer",
|
|
761
|
-
style:
|
|
762
|
-
}, null,
|
|
763
|
+
style: $data.spacerStyle
|
|
764
|
+
}, _ctx.ptm('spacer')), null, 16))
|
|
763
765
|
: vue.createCommentVNode("", true),
|
|
764
766
|
(!$props.loaderDisabled && $props.showLoader && $data.d_loading)
|
|
765
|
-
? (vue.openBlock(), vue.createElementBlock("div", {
|
|
767
|
+
? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
|
|
766
768
|
key: 1,
|
|
767
|
-
class:
|
|
768
|
-
}, [
|
|
769
|
+
class: $options.loaderClass
|
|
770
|
+
}, _ctx.ptm('loader')), [
|
|
769
771
|
(_ctx.$slots && _ctx.$slots.loader)
|
|
770
772
|
? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList($data.loaderArr, (_, index) => {
|
|
771
773
|
return vue.renderSlot(_ctx.$slots, "loader", {
|
|
@@ -775,14 +777,14 @@ this.primevue.virtualscroller = (function (SpinnerIcon, utils, vue) {
|
|
|
775
777
|
}), 128))
|
|
776
778
|
: vue.createCommentVNode("", true),
|
|
777
779
|
vue.renderSlot(_ctx.$slots, "loadingicon", {}, () => [
|
|
778
|
-
vue.createVNode(_component_SpinnerIcon, {
|
|
780
|
+
vue.createVNode(_component_SpinnerIcon, vue.mergeProps({
|
|
779
781
|
spin: "",
|
|
780
782
|
class: "p-virtualscroller-loading-icon"
|
|
781
|
-
})
|
|
783
|
+
}, _ctx.ptm('loadingIcon')), null, 16)
|
|
782
784
|
])
|
|
783
|
-
],
|
|
785
|
+
], 16))
|
|
784
786
|
: vue.createCommentVNode("", true)
|
|
785
|
-
],
|
|
787
|
+
], 16, _hoisted_1))
|
|
786
788
|
: (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
|
|
787
789
|
vue.renderSlot(_ctx.$slots, "default"),
|
|
788
790
|
vue.renderSlot(_ctx.$slots, "content", {
|
|
@@ -827,4 +829,4 @@ this.primevue.virtualscroller = (function (SpinnerIcon, utils, vue) {
|
|
|
827
829
|
|
|
828
830
|
return script;
|
|
829
831
|
|
|
830
|
-
})(primevue.icons.spinner, primevue.utils, Vue);
|
|
832
|
+
})(primevue.basecomponent, primevue.icons.spinner, primevue.utils, Vue);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
this.primevue=this.primevue||{},this.primevue.virtualscroller=function(t,e,s){"use strict";function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var o={name:"VirtualScroller",emits:["update:numToleratedItems","scroll","scroll-index-change","lazy-load"],props:{id:{type:String,default:null},style:null,class:null,items:{type:Array,default:null},itemSize:{type:[Number,Array],default:0},scrollHeight:null,scrollWidth:null,orientation:{type:String,default:"vertical"},numToleratedItems:{type:Number,default:null},delay:{type:Number,default:0},resizeDelay:{type:Number,default:10},lazy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loaderDisabled:{type:Boolean,default:!1},columns:{type:Array,default:null},loading:{type:Boolean,default:!1},showSpacer:{type:Boolean,default:!0},showLoader:{type:Boolean,default:!1},tabindex:{type:Number,default:0},inline:{type:Boolean,default:!1},step:{type:Number,default:0},appendOnly:{type:Boolean,default:!1},autoSize:{type:Boolean,default:!1}},data(){return{first:this.isBoth()?{rows:0,cols:0}:0,last:this.isBoth()?{rows:0,cols:0}:0,page:this.isBoth()?{rows:0,cols:0}:0,numItemsInViewport:this.isBoth()?{rows:0,cols:0}:0,lastScrollPos:this.isBoth()?{top:0,left:0}:0,d_numToleratedItems:this.numToleratedItems,d_loading:this.loading,loaderArr:[],spacerStyle:{},contentStyle:{}}},element:null,content:null,lastScrollPos:null,scrollTimeout:null,resizeTimeout:null,defaultWidth:0,defaultHeight:0,defaultContentWidth:0,defaultContentHeight:0,isRangeChanged:!1,lazyLoadState:{},resizeListener:null,initialized:!1,watch:{numToleratedItems(t){this.d_numToleratedItems=t},loading(t){this.d_loading=t},items(t,e){e&&e.length===(t||[]).length||(this.init(),this.calculateAutoSize())},itemSize(){this.init(),this.calculateAutoSize()},orientation(){this.lastScrollPos=this.isBoth()?{top:0,left:0}:0},scrollHeight(){this.init(),this.calculateAutoSize()},scrollWidth(){this.init(),this.calculateAutoSize()}},mounted(){this.viewInit(),this.lastScrollPos=this.isBoth()?{top:0,left:0}:0,this.lazyLoadState=this.lazyLoadState||{}},updated(){!this.initialized&&this.viewInit()},unmounted(){this.unbindResizeListener(),this.initialized=!1},methods:{viewInit(){e.DomHandler.isVisible(this.element)&&(this.setContentEl(this.content),this.init(),this.bindResizeListener(),this.defaultWidth=e.DomHandler.getWidth(this.element),this.defaultHeight=e.DomHandler.getHeight(this.element),this.defaultContentWidth=e.DomHandler.getWidth(this.content),this.defaultContentHeight=e.DomHandler.getHeight(this.content),this.initialized=!0)},init(){this.disabled||(this.setSize(),this.calculateOptions(),this.setSpacerSize())},isVertical(){return"vertical"===this.orientation},isHorizontal(){return"horizontal"===this.orientation},isBoth(){return"both"===this.orientation},scrollTo(t){this.lastScrollPos=this.both?{top:0,left:0}:0,this.element&&this.element.scrollTo(t)},scrollToIndex(t,e="auto"){const s=this.isBoth(),i=this.isHorizontal(),o=this.first,{numToleratedItems:l}=this.calculateNumItems(),n=this.getContentPosition(),r=this.itemSize,h=(t=0,e)=>t<=e?0:t,a=(t,e,s)=>t*e+s,d=(t=0,s=0)=>this.scrollTo({left:t,top:s,behavior:e});let c=s?{rows:0,cols:0}:0,m=!1;s?(c={rows:h(t[0],l[0]),cols:h(t[1],l[1])},d(a(c.cols,r[1],n.left),a(c.rows,r[0],n.top)),m=c.rows!==o.rows||c.cols!==o.cols):(c=h(t,l),i?d(a(c,r,n.left),0):d(0,a(c,r,n.top)),m=c!==o),this.isRangeChanged=m,this.first=c},scrollInView(t,e,s="auto"){if(e){const i=this.isBoth(),o=this.isHorizontal(),{first:l,viewport:n}=this.getRenderedRange(),r=(t=0,e=0)=>this.scrollTo({left:t,top:e,behavior:s}),h="to-end"===e;if("to-start"===e){if(i)n.first.rows-l.rows>t[0]?r(n.first.cols*this.itemSize[1],(n.first.rows-1)*this.itemSize[0]):n.first.cols-l.cols>t[1]&&r((n.first.cols-1)*this.itemSize[1],n.first.rows*this.itemSize[0]);else if(n.first-l>t){const t=(n.first-1)*this.itemSize;o?r(t,0):r(0,t)}}else if(h)if(i)n.last.rows-l.rows<=t[0]+1?r(n.first.cols*this.itemSize[1],(n.first.rows+1)*this.itemSize[0]):n.last.cols-l.cols<=t[1]+1&&r((n.first.cols+1)*this.itemSize[1],n.first.rows*this.itemSize[0]);else if(n.last-l<=t+1){const t=(n.first+1)*this.itemSize;o?r(t,0):r(0,t)}}else this.scrollToIndex(t,s)},getRenderedRange(){const t=(t,e)=>Math.floor(t/(e||t));let e=this.first,s=0;if(this.element){const i=this.isBoth(),o=this.isHorizontal(),{scrollTop:l,scrollLeft:n}=this.element.scrollTop;if(i)e={rows:t(l,this.itemSize[0]),cols:t(n,this.itemSize[1])},s={rows:e.rows+this.numItemsInViewport.rows,cols:e.cols+this.numItemsInViewport.cols};else{e=t(o?n:l,this.itemSize),s=e+this.numItemsInViewport}}return{first:this.first,last:this.last,viewport:{first:e,last:s}}},calculateNumItems(){const t=this.isBoth(),e=this.isHorizontal(),s=this.itemSize,i=this.getContentPosition(),o=this.element?this.element.offsetWidth-i.left:0,l=this.element?this.element.offsetHeight-i.top:0,n=(t,e)=>Math.ceil(t/(e||t)),r=t=>Math.ceil(t/2),h=t?{rows:n(l,s[0]),cols:n(o,s[1])}:n(e?o:l,s);return{numItemsInViewport:h,numToleratedItems:this.d_numToleratedItems||(t?[r(h.rows),r(h.cols)]:r(h))}},calculateOptions(){const t=this.isBoth(),e=this.first,{numItemsInViewport:s,numToleratedItems:i}=this.calculateNumItems(),o=(t,e,s,i=!1)=>this.getLast(t+e+(t<s?2:3)*s,i),l=t?{rows:o(e.rows,s.rows,i[0]),cols:o(e.cols,s.cols,i[1],!0)}:o(e,s,i);this.last=l,this.numItemsInViewport=s,this.d_numToleratedItems=i,this.$emit("update:numToleratedItems",this.d_numToleratedItems),this.showLoader&&(this.loaderArr=t?Array.from({length:s.rows}).map((()=>Array.from({length:s.cols}))):Array.from({length:s})),this.lazy&&Promise.resolve().then((()=>{this.lazyLoadState={first:this.step?t?{rows:0,cols:e.cols}:0:e,last:Math.min(this.step?this.step:l,this.items.length)},this.$emit("lazy-load",this.lazyLoadState)}))},calculateAutoSize(){this.autoSize&&!this.d_loading&&Promise.resolve().then((()=>{if(this.content){const t=this.isBoth(),s=this.isHorizontal(),i=this.isVertical();this.content.style.minHeight=this.content.style.minWidth="auto",this.content.style.position="relative",this.element.style.contain="none";const[o,l]=[e.DomHandler.getWidth(this.content),e.DomHandler.getHeight(this.content)];o!==this.defaultContentWidth&&(this.element.style.width=""),l!==this.defaultContentHeight&&(this.element.style.height="");const[n,r]=[e.DomHandler.getWidth(this.element),e.DomHandler.getHeight(this.element)];(t||s)&&(this.element.style.width=n<this.defaultWidth?n+"px":this.scrollWidth||this.defaultWidth+"px"),(t||i)&&(this.element.style.height=r<this.defaultHeight?r+"px":this.scrollHeight||this.defaultHeight+"px"),this.content.style.minHeight=this.content.style.minWidth="",this.content.style.position="",this.element.style.contain=""}}))},getLast(t=0,e){return this.items?Math.min(e?(this.columns||this.items[0]).length:this.items.length,t):0},getContentPosition(){if(this.content){const t=getComputedStyle(this.content),e=parseFloat(t.paddingLeft)+Math.max(parseFloat(t.left)||0,0),s=parseFloat(t.paddingRight)+Math.max(parseFloat(t.right)||0,0),i=parseFloat(t.paddingTop)+Math.max(parseFloat(t.top)||0,0),o=parseFloat(t.paddingBottom)+Math.max(parseFloat(t.bottom)||0,0);return{left:e,right:s,top:i,bottom:o,x:e+s,y:i+o}}return{left:0,right:0,top:0,bottom:0,x:0,y:0}},setSize(){if(this.element){const t=this.isBoth(),e=this.isHorizontal(),s=this.element.parentElement,i=this.scrollWidth||`${this.element.offsetWidth||s.offsetWidth}px`,o=this.scrollHeight||`${this.element.offsetHeight||s.offsetHeight}px`,l=(t,e)=>this.element.style[t]=e;t||e?(l("height",o),l("width",i)):l("height",o)}},setSpacerSize(){const t=this.items;if(t){const e=this.isBoth(),s=this.isHorizontal(),i=this.getContentPosition(),o=(t,e,s,i=0)=>this.spacerStyle={...this.spacerStyle,[`${t}`]:(e||[]).length*s+i+"px"};e?(o("height",t,this.itemSize[0],i.y),o("width",this.columns||t[1],this.itemSize[1],i.x)):s?o("width",this.columns||t,this.itemSize,i.x):o("height",t,this.itemSize,i.y)}},setContentPosition(t){if(this.content&&!this.appendOnly){const e=this.isBoth(),s=this.isHorizontal(),i=t?t.first:this.first,o=(t,e)=>t*e,l=(t=0,e=0)=>this.contentStyle={...this.contentStyle,transform:`translate3d(${t}px, ${e}px, 0)`};if(e)l(o(i.cols,this.itemSize[1]),o(i.rows,this.itemSize[0]));else{const t=o(i,this.itemSize);s?l(t,0):l(0,t)}}},onScrollPositionChange(t){const e=t.target,s=this.isBoth(),i=this.isHorizontal(),o=this.getContentPosition(),l=(t,e)=>t?t>e?t-e:t:0,n=(t,e)=>Math.floor(t/(e||t)),r=(t,e,s,i,o,l)=>t<=o?o:l?s-i-o:e+o-1,h=(t,e,s,i,o,l,n)=>t<=l?0:Math.max(0,n?t<e?s:t-l:t>e?s:t-2*l),a=(t,e,s,i,o,l)=>{let n=e+i+2*o;return t>=o&&(n+=o+1),this.getLast(n,l)},d=l(e.scrollTop,o.top),c=l(e.scrollLeft,o.left);let m=s?{rows:0,cols:0}:0,u=this.last,p=!1,f=this.lastScrollPos;if(s){const t=this.lastScrollPos.top<=d,e=this.lastScrollPos.left<=c;if(!this.appendOnly||this.appendOnly&&(t||e)){const s={rows:n(d,this.itemSize[0]),cols:n(c,this.itemSize[1])},i={rows:r(s.rows,this.first.rows,this.last.rows,this.numItemsInViewport.rows,this.d_numToleratedItems[0],t),cols:r(s.cols,this.first.cols,this.last.cols,this.numItemsInViewport.cols,this.d_numToleratedItems[1],e)};m={rows:h(s.rows,i.rows,this.first.rows,this.last.rows,this.numItemsInViewport.rows,this.d_numToleratedItems[0],t),cols:h(s.cols,i.cols,this.first.cols,this.last.cols,this.numItemsInViewport.cols,this.d_numToleratedItems[1],e)},u={rows:a(s.rows,m.rows,this.last.rows,this.numItemsInViewport.rows,this.d_numToleratedItems[0]),cols:a(s.cols,m.cols,this.last.cols,this.numItemsInViewport.cols,this.d_numToleratedItems[1],!0)},p=m.rows!==this.first.rows||u.rows!==this.last.rows||m.cols!==this.first.cols||u.cols!==this.last.cols||this.isRangeChanged,f={top:d,left:c}}}else{const t=i?c:d,e=this.lastScrollPos<=t;if(!this.appendOnly||this.appendOnly&&e){const s=n(t,this.itemSize);m=h(s,r(s,this.first,this.last,this.numItemsInViewport,this.d_numToleratedItems,e),this.first,this.last,this.numItemsInViewport,this.d_numToleratedItems,e),u=a(s,m,this.last,this.numItemsInViewport,this.d_numToleratedItems),p=m!==this.first||u!==this.last||this.isRangeChanged,f=t}}return{first:m,last:u,isRangeChanged:p,scrollPos:f}},onScrollChange(t){const{first:e,last:s,isRangeChanged:i,scrollPos:o}=this.onScrollPositionChange(t);if(i){const t={first:e,last:s};if(this.setContentPosition(t),this.first=e,this.last=s,this.lastScrollPos=o,this.$emit("scroll-index-change",t),this.lazy&&this.isPageChanged(e)){const t={first:this.step?Math.min(this.getPageByFirst(e)*this.step,this.items.length-this.step):e,last:Math.min(this.step?(this.getPageByFirst(e)+1)*this.step:s,this.items.length)};(this.lazyLoadState.first!==t.first||this.lazyLoadState.last!==t.last)&&this.$emit("lazy-load",t),this.lazyLoadState=t}}},onScroll(t){if(this.$emit("scroll",t),this.delay&&this.isPageChanged()){if(this.scrollTimeout&&clearTimeout(this.scrollTimeout),!this.d_loading&&this.showLoader){const{isRangeChanged:e}=this.onScrollPositionChange(t);(e||!!this.step&&this.isPageChanged())&&(this.d_loading=!0)}this.scrollTimeout=setTimeout((()=>{this.onScrollChange(t),!this.d_loading||!this.showLoader||this.lazy&&void 0!==this.loading||(this.d_loading=!1,this.page=this.getPageByFirst())}),this.delay)}else this.onScrollChange(t)},onResize(){this.resizeTimeout&&clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout((()=>{if(e.DomHandler.isVisible(this.element)){const t=this.isBoth(),s=this.isVertical(),i=this.isHorizontal(),[o,l]=[e.DomHandler.getWidth(this.element),e.DomHandler.getHeight(this.element)],[n,r]=[o!==this.defaultWidth,l!==this.defaultHeight];(t?n||r:i?n:!!s&&r)&&(this.d_numToleratedItems=this.numToleratedItems,this.defaultWidth=o,this.defaultHeight=l,this.defaultContentWidth=e.DomHandler.getWidth(this.content),this.defaultContentHeight=e.DomHandler.getHeight(this.content),this.init())}}),this.resizeDelay)},bindResizeListener(){this.resizeListener||(this.resizeListener=this.onResize.bind(this),window.addEventListener("resize",this.resizeListener),window.addEventListener("orientationchange",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),window.removeEventListener("orientationchange",this.resizeListener),this.resizeListener=null)},getOptions(t){const e=(this.items||[]).length,s=this.isBoth()?this.first.rows+t:this.first+t;return{index:s,count:e,first:0===s,last:s===e-1,even:s%2==0,odd:s%2!=0}},getLoaderOptions(t,e){let s=this.loaderArr.length;return{index:t,count:s,first:0===t,last:t===s-1,even:t%2==0,odd:t%2!=0,...e}},getPageByFirst(t){return Math.floor(((t??this.first)+4*this.d_numToleratedItems)/(this.step||1))},isPageChanged(t){return!this.step||this.page!==this.getPageByFirst(t??this.first)},setContentEl(t){this.content=t||this.content||e.DomHandler.findSingle(this.element,".p-virtualscroller-content")},elementRef(t){this.element=t},contentRef(t){this.content=t}},computed:{containerClass(){return["p-virtualscroller",{"p-virtualscroller-inline":this.inline,"p-virtualscroller-both p-both-scroll":this.isBoth(),"p-virtualscroller-horizontal p-horizontal-scroll":this.isHorizontal()},this.class]},contentClass(){return["p-virtualscroller-content",{"p-virtualscroller-loading":this.d_loading}]},loaderClass(){return["p-virtualscroller-loader",{"p-component-overlay":!this.$slots.loader}]},loadedItems(){return this.items&&!this.d_loading?this.isBoth()?this.items.slice(this.appendOnly?0:this.first.rows,this.last.rows).map((t=>this.columns?t:t.slice(this.appendOnly?0:this.first.cols,this.last.cols))):this.isHorizontal()&&this.columns?this.items:this.items.slice(this.appendOnly?0:this.first,this.last):[]},loadedRows(){return this.d_loading?this.loaderDisabled?this.loaderArr:[]:this.loadedItems},loadedColumns(){if(this.columns){const t=this.isBoth(),e=this.isHorizontal();if(t||e)return this.d_loading&&this.loaderDisabled?t?this.loaderArr[0]:this.loaderArr:this.columns.slice(t?this.first.cols:this.first,t?this.last.cols:this.last)}return this.columns}},components:{SpinnerIcon:i(t).default}};const l=["tabindex"];return function(t,e){void 0===e&&(e={});var s=e.insertAt;if(t&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===s&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}("\n.p-virtualscroller {\n position: relative;\n overflow: auto;\n contain: strict;\n transform: translateZ(0);\n will-change: scroll-position;\n outline: 0 none;\n}\n.p-virtualscroller-content {\n position: absolute;\n top: 0;\n left: 0;\n /* contain: content; */\n min-height: 100%;\n min-width: 100%;\n will-change: transform;\n}\n.p-virtualscroller-spacer {\n position: absolute;\n top: 0;\n left: 0;\n height: 1px;\n width: 1px;\n transform-origin: 0 0;\n pointer-events: none;\n}\n.p-virtualscroller .p-virtualscroller-loader {\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n.p-virtualscroller-loader.p-component-overlay {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.p-virtualscroller-loading-icon {\n font-size: 2rem;\n}\n.p-virtualscroller-loading-icon.p-icon {\n width: 2rem;\n height: 2rem;\n}\n.p-virtualscroller-horizontal > .p-virtualscroller-content {\n display: flex;\n}\n\n/* Inline */\n.p-virtualscroller-inline .p-virtualscroller-content {\n position: static;\n}\n"),o.render=function(t,e,i,o,n,r){const h=s.resolveComponent("SpinnerIcon");return i.disabled?(s.openBlock(),s.createElementBlock(s.Fragment,{key:1},[s.renderSlot(t.$slots,"default"),s.renderSlot(t.$slots,"content",{items:i.items,rows:i.items,columns:r.loadedColumns})],64)):(s.openBlock(),s.createElementBlock("div",{key:0,ref:r.elementRef,class:s.normalizeClass(r.containerClass),tabindex:i.tabindex,style:s.normalizeStyle(i.style),onScroll:e[0]||(e[0]=(...t)=>r.onScroll&&r.onScroll(...t))},[s.renderSlot(t.$slots,"content",{styleClass:r.contentClass,items:r.loadedItems,getItemOptions:r.getOptions,loading:n.d_loading,getLoaderOptions:r.getLoaderOptions,itemSize:i.itemSize,rows:r.loadedRows,columns:r.loadedColumns,contentRef:r.contentRef,spacerStyle:n.spacerStyle,contentStyle:n.contentStyle,vertical:r.isVertical(),horizontal:r.isHorizontal(),both:r.isBoth()},(()=>[s.createElementVNode("div",{ref:r.contentRef,class:s.normalizeClass(r.contentClass),style:s.normalizeStyle(n.contentStyle)},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(r.loadedItems,((e,i)=>s.renderSlot(t.$slots,"item",{key:i,item:e,options:r.getOptions(i)}))),128))],6)])),i.showSpacer?(s.openBlock(),s.createElementBlock("div",{key:0,class:"p-virtualscroller-spacer",style:s.normalizeStyle(n.spacerStyle)},null,4)):s.createCommentVNode("",!0),!i.loaderDisabled&&i.showLoader&&n.d_loading?(s.openBlock(),s.createElementBlock("div",{key:1,class:s.normalizeClass(r.loaderClass)},[t.$slots&&t.$slots.loader?(s.openBlock(!0),s.createElementBlock(s.Fragment,{key:0},s.renderList(n.loaderArr,((e,i)=>s.renderSlot(t.$slots,"loader",{key:i,options:r.getLoaderOptions(i,r.isBoth()&&{numCols:t.d_numItemsInViewport.cols})}))),128)):s.createCommentVNode("",!0),s.renderSlot(t.$slots,"loadingicon",{},(()=>[s.createVNode(h,{spin:"",class:"p-virtualscroller-loading-icon"})]))],2)):s.createCommentVNode("",!0)],46,l))},o}(primevue.icons.spinner,primevue.utils,Vue);
|
|
1
|
+
this.primevue=this.primevue||{},this.primevue.virtualscroller=function(t,e,s,i){"use strict";function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var l=o(t),n=o(e),r={name:"VirtualScroller",extends:l.default,emits:["update:numToleratedItems","scroll","scroll-index-change","lazy-load"],props:{id:{type:String,default:null},style:null,class:null,items:{type:Array,default:null},itemSize:{type:[Number,Array],default:0},scrollHeight:null,scrollWidth:null,orientation:{type:String,default:"vertical"},numToleratedItems:{type:Number,default:null},delay:{type:Number,default:0},resizeDelay:{type:Number,default:10},lazy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loaderDisabled:{type:Boolean,default:!1},columns:{type:Array,default:null},loading:{type:Boolean,default:!1},showSpacer:{type:Boolean,default:!0},showLoader:{type:Boolean,default:!1},tabindex:{type:Number,default:0},inline:{type:Boolean,default:!1},step:{type:Number,default:0},appendOnly:{type:Boolean,default:!1},autoSize:{type:Boolean,default:!1}},data(){return{first:this.isBoth()?{rows:0,cols:0}:0,last:this.isBoth()?{rows:0,cols:0}:0,page:this.isBoth()?{rows:0,cols:0}:0,numItemsInViewport:this.isBoth()?{rows:0,cols:0}:0,lastScrollPos:this.isBoth()?{top:0,left:0}:0,d_numToleratedItems:this.numToleratedItems,d_loading:this.loading,loaderArr:[],spacerStyle:{},contentStyle:{}}},element:null,content:null,lastScrollPos:null,scrollTimeout:null,resizeTimeout:null,defaultWidth:0,defaultHeight:0,defaultContentWidth:0,defaultContentHeight:0,isRangeChanged:!1,lazyLoadState:{},resizeListener:null,initialized:!1,watch:{numToleratedItems(t){this.d_numToleratedItems=t},loading(t){this.d_loading=t},items(t,e){e&&e.length===(t||[]).length||(this.init(),this.calculateAutoSize())},itemSize(){this.init(),this.calculateAutoSize()},orientation(){this.lastScrollPos=this.isBoth()?{top:0,left:0}:0},scrollHeight(){this.init(),this.calculateAutoSize()},scrollWidth(){this.init(),this.calculateAutoSize()}},mounted(){this.viewInit(),this.lastScrollPos=this.isBoth()?{top:0,left:0}:0,this.lazyLoadState=this.lazyLoadState||{}},updated(){!this.initialized&&this.viewInit()},unmounted(){this.unbindResizeListener(),this.initialized=!1},methods:{viewInit(){s.DomHandler.isVisible(this.element)&&(this.setContentEl(this.content),this.init(),this.bindResizeListener(),this.defaultWidth=s.DomHandler.getWidth(this.element),this.defaultHeight=s.DomHandler.getHeight(this.element),this.defaultContentWidth=s.DomHandler.getWidth(this.content),this.defaultContentHeight=s.DomHandler.getHeight(this.content),this.initialized=!0)},init(){this.disabled||(this.setSize(),this.calculateOptions(),this.setSpacerSize())},isVertical(){return"vertical"===this.orientation},isHorizontal(){return"horizontal"===this.orientation},isBoth(){return"both"===this.orientation},scrollTo(t){this.lastScrollPos=this.both?{top:0,left:0}:0,this.element&&this.element.scrollTo(t)},scrollToIndex(t,e="auto"){const s=this.isBoth(),i=this.isHorizontal(),o=this.first,{numToleratedItems:l}=this.calculateNumItems(),n=this.getContentPosition(),r=this.itemSize,h=(t=0,e)=>t<=e?0:t,a=(t,e,s)=>t*e+s,d=(t=0,s=0)=>this.scrollTo({left:t,top:s,behavior:e});let c=s?{rows:0,cols:0}:0,m=!1;s?(c={rows:h(t[0],l[0]),cols:h(t[1],l[1])},d(a(c.cols,r[1],n.left),a(c.rows,r[0],n.top)),m=c.rows!==o.rows||c.cols!==o.cols):(c=h(t,l),i?d(a(c,r,n.left),0):d(0,a(c,r,n.top)),m=c!==o),this.isRangeChanged=m,this.first=c},scrollInView(t,e,s="auto"){if(e){const i=this.isBoth(),o=this.isHorizontal(),{first:l,viewport:n}=this.getRenderedRange(),r=(t=0,e=0)=>this.scrollTo({left:t,top:e,behavior:s}),h="to-end"===e;if("to-start"===e){if(i)n.first.rows-l.rows>t[0]?r(n.first.cols*this.itemSize[1],(n.first.rows-1)*this.itemSize[0]):n.first.cols-l.cols>t[1]&&r((n.first.cols-1)*this.itemSize[1],n.first.rows*this.itemSize[0]);else if(n.first-l>t){const t=(n.first-1)*this.itemSize;o?r(t,0):r(0,t)}}else if(h)if(i)n.last.rows-l.rows<=t[0]+1?r(n.first.cols*this.itemSize[1],(n.first.rows+1)*this.itemSize[0]):n.last.cols-l.cols<=t[1]+1&&r((n.first.cols+1)*this.itemSize[1],n.first.rows*this.itemSize[0]);else if(n.last-l<=t+1){const t=(n.first+1)*this.itemSize;o?r(t,0):r(0,t)}}else this.scrollToIndex(t,s)},getRenderedRange(){const t=(t,e)=>Math.floor(t/(e||t));let e=this.first,s=0;if(this.element){const i=this.isBoth(),o=this.isHorizontal(),{scrollTop:l,scrollLeft:n}=this.element.scrollTop;if(i)e={rows:t(l,this.itemSize[0]),cols:t(n,this.itemSize[1])},s={rows:e.rows+this.numItemsInViewport.rows,cols:e.cols+this.numItemsInViewport.cols};else{e=t(o?n:l,this.itemSize),s=e+this.numItemsInViewport}}return{first:this.first,last:this.last,viewport:{first:e,last:s}}},calculateNumItems(){const t=this.isBoth(),e=this.isHorizontal(),s=this.itemSize,i=this.getContentPosition(),o=this.element?this.element.offsetWidth-i.left:0,l=this.element?this.element.offsetHeight-i.top:0,n=(t,e)=>Math.ceil(t/(e||t)),r=t=>Math.ceil(t/2),h=t?{rows:n(l,s[0]),cols:n(o,s[1])}:n(e?o:l,s);return{numItemsInViewport:h,numToleratedItems:this.d_numToleratedItems||(t?[r(h.rows),r(h.cols)]:r(h))}},calculateOptions(){const t=this.isBoth(),e=this.first,{numItemsInViewport:s,numToleratedItems:i}=this.calculateNumItems(),o=(t,e,s,i=!1)=>this.getLast(t+e+(t<s?2:3)*s,i),l=t?{rows:o(e.rows,s.rows,i[0]),cols:o(e.cols,s.cols,i[1],!0)}:o(e,s,i);this.last=l,this.numItemsInViewport=s,this.d_numToleratedItems=i,this.$emit("update:numToleratedItems",this.d_numToleratedItems),this.showLoader&&(this.loaderArr=t?Array.from({length:s.rows}).map((()=>Array.from({length:s.cols}))):Array.from({length:s})),this.lazy&&Promise.resolve().then((()=>{this.lazyLoadState={first:this.step?t?{rows:0,cols:e.cols}:0:e,last:Math.min(this.step?this.step:l,this.items.length)},this.$emit("lazy-load",this.lazyLoadState)}))},calculateAutoSize(){this.autoSize&&!this.d_loading&&Promise.resolve().then((()=>{if(this.content){const t=this.isBoth(),e=this.isHorizontal(),i=this.isVertical();this.content.style.minHeight=this.content.style.minWidth="auto",this.content.style.position="relative",this.element.style.contain="none";const[o,l]=[s.DomHandler.getWidth(this.content),s.DomHandler.getHeight(this.content)];o!==this.defaultContentWidth&&(this.element.style.width=""),l!==this.defaultContentHeight&&(this.element.style.height="");const[n,r]=[s.DomHandler.getWidth(this.element),s.DomHandler.getHeight(this.element)];(t||e)&&(this.element.style.width=n<this.defaultWidth?n+"px":this.scrollWidth||this.defaultWidth+"px"),(t||i)&&(this.element.style.height=r<this.defaultHeight?r+"px":this.scrollHeight||this.defaultHeight+"px"),this.content.style.minHeight=this.content.style.minWidth="",this.content.style.position="",this.element.style.contain=""}}))},getLast(t=0,e){return this.items?Math.min(e?(this.columns||this.items[0]).length:this.items.length,t):0},getContentPosition(){if(this.content){const t=getComputedStyle(this.content),e=parseFloat(t.paddingLeft)+Math.max(parseFloat(t.left)||0,0),s=parseFloat(t.paddingRight)+Math.max(parseFloat(t.right)||0,0),i=parseFloat(t.paddingTop)+Math.max(parseFloat(t.top)||0,0),o=parseFloat(t.paddingBottom)+Math.max(parseFloat(t.bottom)||0,0);return{left:e,right:s,top:i,bottom:o,x:e+s,y:i+o}}return{left:0,right:0,top:0,bottom:0,x:0,y:0}},setSize(){if(this.element){const t=this.isBoth(),e=this.isHorizontal(),s=this.element.parentElement,i=this.scrollWidth||`${this.element.offsetWidth||s.offsetWidth}px`,o=this.scrollHeight||`${this.element.offsetHeight||s.offsetHeight}px`,l=(t,e)=>this.element.style[t]=e;t||e?(l("height",o),l("width",i)):l("height",o)}},setSpacerSize(){const t=this.items;if(t){const e=this.isBoth(),s=this.isHorizontal(),i=this.getContentPosition(),o=(t,e,s,i=0)=>this.spacerStyle={...this.spacerStyle,[`${t}`]:(e||[]).length*s+i+"px"};e?(o("height",t,this.itemSize[0],i.y),o("width",this.columns||t[1],this.itemSize[1],i.x)):s?o("width",this.columns||t,this.itemSize,i.x):o("height",t,this.itemSize,i.y)}},setContentPosition(t){if(this.content&&!this.appendOnly){const e=this.isBoth(),s=this.isHorizontal(),i=t?t.first:this.first,o=(t,e)=>t*e,l=(t=0,e=0)=>this.contentStyle={...this.contentStyle,transform:`translate3d(${t}px, ${e}px, 0)`};if(e)l(o(i.cols,this.itemSize[1]),o(i.rows,this.itemSize[0]));else{const t=o(i,this.itemSize);s?l(t,0):l(0,t)}}},onScrollPositionChange(t){const e=t.target,s=this.isBoth(),i=this.isHorizontal(),o=this.getContentPosition(),l=(t,e)=>t?t>e?t-e:t:0,n=(t,e)=>Math.floor(t/(e||t)),r=(t,e,s,i,o,l)=>t<=o?o:l?s-i-o:e+o-1,h=(t,e,s,i,o,l,n)=>t<=l?0:Math.max(0,n?t<e?s:t-l:t>e?s:t-2*l),a=(t,e,s,i,o,l)=>{let n=e+i+2*o;return t>=o&&(n+=o+1),this.getLast(n,l)},d=l(e.scrollTop,o.top),c=l(e.scrollLeft,o.left);let m=s?{rows:0,cols:0}:0,u=this.last,p=!1,f=this.lastScrollPos;if(s){const t=this.lastScrollPos.top<=d,e=this.lastScrollPos.left<=c;if(!this.appendOnly||this.appendOnly&&(t||e)){const s={rows:n(d,this.itemSize[0]),cols:n(c,this.itemSize[1])},i={rows:r(s.rows,this.first.rows,this.last.rows,this.numItemsInViewport.rows,this.d_numToleratedItems[0],t),cols:r(s.cols,this.first.cols,this.last.cols,this.numItemsInViewport.cols,this.d_numToleratedItems[1],e)};m={rows:h(s.rows,i.rows,this.first.rows,this.last.rows,this.numItemsInViewport.rows,this.d_numToleratedItems[0],t),cols:h(s.cols,i.cols,this.first.cols,this.last.cols,this.numItemsInViewport.cols,this.d_numToleratedItems[1],e)},u={rows:a(s.rows,m.rows,this.last.rows,this.numItemsInViewport.rows,this.d_numToleratedItems[0]),cols:a(s.cols,m.cols,this.last.cols,this.numItemsInViewport.cols,this.d_numToleratedItems[1],!0)},p=m.rows!==this.first.rows||u.rows!==this.last.rows||m.cols!==this.first.cols||u.cols!==this.last.cols||this.isRangeChanged,f={top:d,left:c}}}else{const t=i?c:d,e=this.lastScrollPos<=t;if(!this.appendOnly||this.appendOnly&&e){const s=n(t,this.itemSize);m=h(s,r(s,this.first,this.last,this.numItemsInViewport,this.d_numToleratedItems,e),this.first,this.last,this.numItemsInViewport,this.d_numToleratedItems,e),u=a(s,m,this.last,this.numItemsInViewport,this.d_numToleratedItems),p=m!==this.first||u!==this.last||this.isRangeChanged,f=t}}return{first:m,last:u,isRangeChanged:p,scrollPos:f}},onScrollChange(t){const{first:e,last:s,isRangeChanged:i,scrollPos:o}=this.onScrollPositionChange(t);if(i){const t={first:e,last:s};if(this.setContentPosition(t),this.first=e,this.last=s,this.lastScrollPos=o,this.$emit("scroll-index-change",t),this.lazy&&this.isPageChanged(e)){const t={first:this.step?Math.min(this.getPageByFirst(e)*this.step,this.items.length-this.step):e,last:Math.min(this.step?(this.getPageByFirst(e)+1)*this.step:s,this.items.length)};(this.lazyLoadState.first!==t.first||this.lazyLoadState.last!==t.last)&&this.$emit("lazy-load",t),this.lazyLoadState=t}}},onScroll(t){if(this.$emit("scroll",t),this.delay&&this.isPageChanged()){if(this.scrollTimeout&&clearTimeout(this.scrollTimeout),!this.d_loading&&this.showLoader){const{isRangeChanged:e}=this.onScrollPositionChange(t);(e||!!this.step&&this.isPageChanged())&&(this.d_loading=!0)}this.scrollTimeout=setTimeout((()=>{this.onScrollChange(t),!this.d_loading||!this.showLoader||this.lazy&&void 0!==this.loading||(this.d_loading=!1,this.page=this.getPageByFirst())}),this.delay)}else this.onScrollChange(t)},onResize(){this.resizeTimeout&&clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout((()=>{if(s.DomHandler.isVisible(this.element)){const t=this.isBoth(),e=this.isVertical(),i=this.isHorizontal(),[o,l]=[s.DomHandler.getWidth(this.element),s.DomHandler.getHeight(this.element)],[n,r]=[o!==this.defaultWidth,l!==this.defaultHeight];(t?n||r:i?n:!!e&&r)&&(this.d_numToleratedItems=this.numToleratedItems,this.defaultWidth=o,this.defaultHeight=l,this.defaultContentWidth=s.DomHandler.getWidth(this.content),this.defaultContentHeight=s.DomHandler.getHeight(this.content),this.init())}}),this.resizeDelay)},bindResizeListener(){this.resizeListener||(this.resizeListener=this.onResize.bind(this),window.addEventListener("resize",this.resizeListener),window.addEventListener("orientationchange",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),window.removeEventListener("orientationchange",this.resizeListener),this.resizeListener=null)},getOptions(t){const e=(this.items||[]).length,s=this.isBoth()?this.first.rows+t:this.first+t;return{index:s,count:e,first:0===s,last:s===e-1,even:s%2==0,odd:s%2!=0}},getLoaderOptions(t,e){let s=this.loaderArr.length;return{index:t,count:s,first:0===t,last:t===s-1,even:t%2==0,odd:t%2!=0,...e}},getPageByFirst(t){return Math.floor(((t??this.first)+4*this.d_numToleratedItems)/(this.step||1))},isPageChanged(t){return!this.step||this.page!==this.getPageByFirst(t??this.first)},setContentEl(t){this.content=t||this.content||s.DomHandler.findSingle(this.element,".p-virtualscroller-content")},elementRef(t){this.element=t},contentRef(t){this.content=t}},computed:{containerClass(){return["p-virtualscroller",{"p-virtualscroller-inline":this.inline,"p-virtualscroller-both p-both-scroll":this.isBoth(),"p-virtualscroller-horizontal p-horizontal-scroll":this.isHorizontal()},this.class]},contentClass(){return["p-virtualscroller-content",{"p-virtualscroller-loading":this.d_loading}]},loaderClass(){return["p-virtualscroller-loader",{"p-component-overlay":!this.$slots.loader}]},loadedItems(){return this.items&&!this.d_loading?this.isBoth()?this.items.slice(this.appendOnly?0:this.first.rows,this.last.rows).map((t=>this.columns?t:t.slice(this.appendOnly?0:this.first.cols,this.last.cols))):this.isHorizontal()&&this.columns?this.items:this.items.slice(this.appendOnly?0:this.first,this.last):[]},loadedRows(){return this.d_loading?this.loaderDisabled?this.loaderArr:[]:this.loadedItems},loadedColumns(){if(this.columns){const t=this.isBoth(),e=this.isHorizontal();if(t||e)return this.d_loading&&this.loaderDisabled?t?this.loaderArr[0]:this.loaderArr:this.columns.slice(t?this.first.cols:this.first,t?this.last.cols:this.last)}return this.columns}},components:{SpinnerIcon:n.default}};const h=["tabindex"];return function(t,e){void 0===e&&(e={});var s=e.insertAt;if(t&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===s&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}("\n.p-virtualscroller {\n position: relative;\n overflow: auto;\n contain: strict;\n transform: translateZ(0);\n will-change: scroll-position;\n outline: 0 none;\n}\n.p-virtualscroller-content {\n position: absolute;\n top: 0;\n left: 0;\n /* contain: content; */\n min-height: 100%;\n min-width: 100%;\n will-change: transform;\n}\n.p-virtualscroller-spacer {\n position: absolute;\n top: 0;\n left: 0;\n height: 1px;\n width: 1px;\n transform-origin: 0 0;\n pointer-events: none;\n}\n.p-virtualscroller .p-virtualscroller-loader {\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n.p-virtualscroller-loader.p-component-overlay {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.p-virtualscroller-loading-icon {\n font-size: 2rem;\n}\n.p-virtualscroller-loading-icon.p-icon {\n width: 2rem;\n height: 2rem;\n}\n.p-virtualscroller-horizontal > .p-virtualscroller-content {\n display: flex;\n}\n\n/* Inline */\n.p-virtualscroller-inline .p-virtualscroller-content {\n position: static;\n}\n"),r.render=function(t,e,s,o,l,n){const r=i.resolveComponent("SpinnerIcon");return s.disabled?(i.openBlock(),i.createElementBlock(i.Fragment,{key:1},[i.renderSlot(t.$slots,"default"),i.renderSlot(t.$slots,"content",{items:s.items,rows:s.items,columns:n.loadedColumns})],64)):(i.openBlock(),i.createElementBlock("div",i.mergeProps({key:0,ref:n.elementRef,class:n.containerClass,tabindex:s.tabindex,style:s.style,onScroll:e[0]||(e[0]=(...t)=>n.onScroll&&n.onScroll(...t))},t.ptm("root")),[i.renderSlot(t.$slots,"content",{styleClass:n.contentClass,items:n.loadedItems,getItemOptions:n.getOptions,loading:l.d_loading,getLoaderOptions:n.getLoaderOptions,itemSize:s.itemSize,rows:n.loadedRows,columns:n.loadedColumns,contentRef:n.contentRef,spacerStyle:l.spacerStyle,contentStyle:l.contentStyle,vertical:n.isVertical(),horizontal:n.isHorizontal(),both:n.isBoth()},(()=>[i.createElementVNode("div",i.mergeProps({ref:n.contentRef,class:n.contentClass,style:l.contentStyle},t.ptm("content")),[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(n.loadedItems,((e,s)=>i.renderSlot(t.$slots,"item",{key:s,item:e,options:n.getOptions(s)}))),128))],16)])),s.showSpacer?(i.openBlock(),i.createElementBlock("div",i.mergeProps({key:0,class:"p-virtualscroller-spacer",style:l.spacerStyle},t.ptm("spacer")),null,16)):i.createCommentVNode("",!0),!s.loaderDisabled&&s.showLoader&&l.d_loading?(i.openBlock(),i.createElementBlock("div",i.mergeProps({key:1,class:n.loaderClass},t.ptm("loader")),[t.$slots&&t.$slots.loader?(i.openBlock(!0),i.createElementBlock(i.Fragment,{key:0},i.renderList(l.loaderArr,((e,s)=>i.renderSlot(t.$slots,"loader",{key:s,options:n.getLoaderOptions(s,n.isBoth()&&{numCols:t.d_numItemsInViewport.cols})}))),128)):i.createCommentVNode("",!0),i.renderSlot(t.$slots,"loadingicon",{},(()=>[i.createVNode(r,i.mergeProps({spin:"",class:"p-virtualscroller-loading-icon"},t.ptm("loadingIcon")),null,16)]))],16)):i.createCommentVNode("",!0)],16,h))},r}(primevue.basecomponent,primevue.icons.spinner,primevue.utils,Vue);
|