framework7 7.0.0-beta.2 → 7.0.0-beta.20
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/components/accordion/accordion.js +2 -2
- package/components/accordion/{accordion.umd.js → accordion.lazy.js} +1 -1
- package/components/actions/actions-class.js +11 -6
- package/components/actions/actions-rtl.css +1 -1
- package/components/actions/actions.css +1 -1
- package/components/actions/actions.d.ts +2 -0
- package/components/actions/actions.js +13 -4
- package/components/actions/actions.lazy.js +1 -0
- package/components/actions/actions.less +3 -0
- package/components/app/app-class.d.ts +10 -10
- package/components/app/app-class.js +43 -37
- package/components/app/app.less +3 -3
- package/components/app/load-module.js +4 -4
- package/components/appbar/{appbar.umd.js → appbar.lazy.js} +0 -0
- package/components/area-chart/area-chart-class.js +38 -22
- package/components/area-chart/area-chart-rtl.css +1 -1
- package/components/area-chart/area-chart.css +1 -1
- package/components/area-chart/area-chart.js +3 -3
- package/components/area-chart/area-chart.lazy.js +1 -0
- package/components/autocomplete/autocomplete-class.js +10 -6
- package/components/autocomplete/autocomplete-rtl.css +1 -1
- package/components/autocomplete/autocomplete.css +1 -1
- package/components/autocomplete/autocomplete.js +3 -3
- package/components/autocomplete/autocomplete.lazy.js +1 -0
- package/components/breadcrumbs/breadcrumbs-aurora.less +2 -0
- package/components/breadcrumbs/breadcrumbs-ios.less +2 -0
- package/components/breadcrumbs/breadcrumbs-md.less +2 -0
- package/components/breadcrumbs/breadcrumbs-rtl.css +1 -0
- package/components/breadcrumbs/breadcrumbs-vars.less +36 -0
- package/components/breadcrumbs/breadcrumbs.css +1 -0
- package/components/breadcrumbs/breadcrumbs.d.ts +15 -0
- package/components/breadcrumbs/breadcrumbs.js +13 -0
- package/components/breadcrumbs/breadcrumbs.lazy.js +1 -0
- package/components/breadcrumbs/breadcrumbs.less +100 -0
- package/components/calendar/calendar-class.js +222 -130
- package/components/calendar/calendar-rtl.css +1 -1
- package/components/calendar/calendar-vars.less +6 -10
- package/components/calendar/calendar.css +1 -1
- package/components/calendar/calendar.d.ts +2 -0
- package/components/calendar/calendar.js +9 -4
- package/components/calendar/calendar.lazy.js +1 -0
- package/components/calendar/calendar.less +20 -16
- package/components/card/card-rtl.css +1 -1
- package/components/card/card.css +1 -1
- package/components/card/card.js +27 -7
- package/components/card/card.lazy.js +1 -0
- package/components/checkbox/checkbox-rtl.css +1 -1
- package/components/checkbox/checkbox.css +1 -1
- package/components/checkbox/{checkbox.umd.js → checkbox.lazy.js} +0 -0
- package/components/chip/chip-rtl.css +1 -1
- package/components/chip/chip.css +1 -1
- package/components/chip/{chip.umd.js → chip.lazy.js} +0 -0
- package/components/color-picker/color-picker-class.js +37 -21
- package/components/color-picker/color-picker-rtl.css +1 -1
- package/components/color-picker/color-picker.css +1 -1
- package/components/color-picker/color-picker.js +8 -4
- package/components/color-picker/{color-picker.umd.js → color-picker.lazy.js} +1 -1
- package/components/color-picker/modules/alpha-slider.js +1 -1
- package/components/color-picker/modules/brightness-slider.js +2 -2
- package/components/color-picker/modules/current-color.js +1 -1
- package/components/color-picker/modules/hex.js +1 -1
- package/components/color-picker/modules/hs-spectrum.js +4 -4
- package/components/color-picker/modules/hsb-sliders.js +3 -3
- package/components/color-picker/modules/hue-slider.js +1 -1
- package/components/color-picker/modules/initial-current-colors.js +1 -1
- package/components/color-picker/modules/palette.js +2 -2
- package/components/color-picker/modules/rgb-bars.js +2 -2
- package/components/color-picker/modules/rgb-sliders.js +2 -2
- package/components/color-picker/modules/sb-spectrum.js +3 -3
- package/components/color-picker/modules/wheel.js +3 -3
- package/components/contacts-list/contacts-list-rtl.css +1 -1
- package/components/contacts-list/contacts-list.css +1 -1
- package/components/contacts-list/{contacts-list.umd.js → contacts-list.lazy.js} +0 -0
- package/components/data-table/data-table-class.js +8 -4
- package/components/data-table/data-table-rtl.css +1 -1
- package/components/data-table/data-table.css +1 -1
- package/components/data-table/data-table.js +3 -3
- package/components/data-table/data-table.lazy.js +1 -0
- package/components/dialog/dialog-class.js +5 -5
- package/components/dialog/dialog-rtl.css +1 -1
- package/components/dialog/dialog.css +1 -1
- package/components/dialog/dialog.js +33 -9
- package/components/dialog/dialog.lazy.js +1 -0
- package/components/elevation/{elevation.umd.js → elevation.lazy.js} +0 -0
- package/components/fab/fab-rtl.css +1 -1
- package/components/fab/fab.css +1 -1
- package/components/fab/fab.js +17 -5
- package/components/fab/fab.lazy.js +1 -0
- package/components/form/form.js +2 -2
- package/components/form/{form.umd.js → form.lazy.js} +1 -1
- package/components/gauge/gauge-class.js +14 -6
- package/components/gauge/gauge.d.ts +2 -2
- package/components/gauge/gauge.js +4 -4
- package/components/gauge/gauge.lazy.js +1 -0
- package/components/grid/grid-rtl.css +1 -1
- package/components/grid/grid.css +1 -1
- package/components/grid/grid.js +2 -2
- package/components/grid/{grid.umd.js → grid.lazy.js} +0 -0
- package/components/infinite-scroll/infinite-scroll.js +2 -2
- package/components/infinite-scroll/{infinite-scroll.umd.js → infinite-scroll.lazy.js} +0 -0
- package/components/input/input-rtl.css +1 -1
- package/components/input/input.css +1 -1
- package/components/input/input.js +8 -4
- package/components/input/input.lazy.js +1 -0
- package/components/input/input.less +1 -1
- package/components/lazy/lazy.js +3 -3
- package/components/lazy/{lazy.umd.js → lazy.lazy.js} +0 -0
- package/components/list-index/list-index-class.js +9 -5
- package/components/list-index/list-index.d.ts +1 -1
- package/components/list-index/list-index.js +4 -4
- package/components/list-index/list-index.lazy.js +1 -0
- package/components/login-screen/login-screen-class.js +3 -3
- package/components/login-screen/login-screen-rtl.css +1 -1
- package/components/login-screen/login-screen.css +1 -1
- package/components/login-screen/login-screen.js +12 -4
- package/components/login-screen/login-screen.lazy.js +1 -0
- package/components/login-screen/login-screen.less +1 -1
- package/components/menu/menu.js +12 -4
- package/components/menu/menu.lazy.js +1 -0
- package/components/messagebar/messagebar-class.js +28 -8
- package/components/messagebar/messagebar-rtl.css +1 -1
- package/components/messagebar/messagebar.css +1 -1
- package/components/messagebar/messagebar.js +4 -4
- package/components/messagebar/messagebar.lazy.js +1 -0
- package/components/messages/messages-class.js +64 -28
- package/components/messages/messages-rtl.css +1 -1
- package/components/messages/messages.css +1 -1
- package/components/messages/messages.js +3 -3
- package/components/messages/messages.lazy.js +1 -0
- package/components/modal/custom-modal-class.js +3 -3
- package/components/modal/modal-class.js +13 -3
- package/components/modal/modal.js +2 -2
- package/components/navbar/navbar.js +29 -5
- package/components/notification/notification-aurora.less +1 -1
- package/components/notification/notification-class.js +4 -4
- package/components/notification/notification-ios.less +1 -1
- package/components/notification/notification-rtl.css +1 -1
- package/components/notification/notification.css +1 -1
- package/components/notification/notification.d.ts +4 -4
- package/components/notification/notification.js +3 -3
- package/components/notification/{notification.umd.js → notification.lazy.js} +0 -0
- package/components/page/page-vars.less +1 -1
- package/components/panel/panel-class.js +40 -12
- package/components/panel/panel.js +43 -11
- package/components/panel/panel.lazy.js +1 -0
- package/components/panel/resizable-panel.js +3 -3
- package/components/panel/swipe-panel.js +2 -2
- package/components/photo-browser/photo-browser-class.js +46 -12
- package/components/photo-browser/photo-browser.js +2 -2
- package/components/photo-browser/photo-browser.lazy.js +1 -0
- package/components/picker/picker-class.js +17 -13
- package/components/picker/picker-column.js +35 -271
- package/components/picker/picker-rtl.css +1 -1
- package/components/picker/picker.css +1 -1
- package/components/picker/picker.d.ts +2 -13
- package/components/picker/picker.js +8 -9
- package/components/picker/picker.lazy.js +1 -0
- package/components/picker/picker.less +28 -10
- package/components/pie-chart/pie-chart-class.js +20 -11
- package/components/pie-chart/pie-chart.js +3 -3
- package/components/pie-chart/pie-chart.lazy.js +1 -0
- package/components/popover/popover-class.js +24 -7
- package/components/popover/popover-rtl.css +1 -1
- package/components/popover/popover.css +1 -1
- package/components/popover/popover.d.ts +2 -0
- package/components/popover/popover.js +15 -6
- package/components/popover/popover.lazy.js +1 -0
- package/components/popover/popover.less +3 -0
- package/components/popup/popup-class.js +11 -6
- package/components/popup/popup-rtl.css +1 -1
- package/components/popup/popup.css +1 -1
- package/components/popup/popup.d.ts +4 -0
- package/components/popup/popup.js +13 -4
- package/components/popup/popup.lazy.js +1 -0
- package/components/popup/popup.less +25 -21
- package/components/preloader/preloader-ios.less +3 -0
- package/components/preloader/preloader-rtl.css +1 -1
- package/components/preloader/preloader.css +1 -1
- package/components/preloader/preloader.d.ts +4 -0
- package/components/preloader/preloader.js +12 -4
- package/components/preloader/preloader.lazy.js +1 -0
- package/components/progressbar/progressbar-aurora.less +32 -13
- package/components/progressbar/progressbar-ios.less +19 -7
- package/components/progressbar/progressbar-md.less +64 -28
- package/components/progressbar/progressbar-rtl.css +1 -1
- package/components/progressbar/progressbar.css +1 -1
- package/components/progressbar/progressbar.js +19 -6
- package/components/progressbar/progressbar.lazy.js +1 -0
- package/components/progressbar/progressbar.less +16 -4
- package/components/pull-to-refresh/pull-to-refresh-class.js +10 -6
- package/components/pull-to-refresh/pull-to-refresh.js +4 -4
- package/components/pull-to-refresh/pull-to-refresh.lazy.js +1 -0
- package/components/radio/radio-rtl.css +1 -1
- package/components/radio/radio.css +1 -1
- package/components/radio/{radio.umd.js → radio.lazy.js} +0 -0
- package/components/range/range-class.js +4 -4
- package/components/range/range.d.ts +23 -5
- package/components/range/range.js +14 -6
- package/components/range/{range.umd.js → range.lazy.js} +1 -1
- package/components/searchbar/searchbar-class.js +11 -7
- package/components/searchbar/searchbar-rtl.css +1 -1
- package/components/searchbar/searchbar.css +1 -1
- package/components/searchbar/searchbar.js +24 -8
- package/components/searchbar/searchbar.lazy.js +1 -0
- package/components/searchbar/searchbar.less +1 -1
- package/components/sheet/sheet-class.js +26 -7
- package/components/sheet/sheet-rtl.css +1 -1
- package/components/sheet/sheet.css +1 -1
- package/components/sheet/sheet.d.ts +2 -0
- package/components/sheet/sheet.js +15 -6
- package/components/sheet/sheet.lazy.js +1 -0
- package/components/sheet/sheet.less +19 -16
- package/components/skeleton/skeleton-rtl.css +1 -1
- package/components/skeleton/skeleton-vars.less +1 -1
- package/components/skeleton/skeleton.css +1 -1
- package/components/skeleton/{skeleton.umd.js → skeleton.lazy.js} +0 -0
- package/components/smart-select/smart-select-class.js +19 -7
- package/components/smart-select/smart-select.js +4 -4
- package/components/smart-select/smart-select.lazy.js +1 -0
- package/components/sortable/sortable-rtl.css +1 -1
- package/components/sortable/sortable.css +1 -1
- package/components/sortable/sortable.d.ts +5 -1
- package/components/sortable/sortable.js +48 -11
- package/components/sortable/sortable.lazy.js +1 -0
- package/components/statusbar/statusbar.d.ts +9 -9
- package/components/statusbar/statusbar.js +8 -4
- package/components/stepper/stepper-class.js +3 -3
- package/components/stepper/stepper.js +14 -6
- package/components/stepper/{stepper.umd.js → stepper.lazy.js} +1 -1
- package/components/subnavbar/subnavbar.js +1 -1
- package/components/swipeout/swipeout-rtl.css +1 -1
- package/components/swipeout/swipeout.css +1 -1
- package/components/swipeout/swipeout.js +19 -6
- package/components/swipeout/{swipeout.umd.js → swipeout.lazy.js} +1 -1
- package/components/swiper/swiper-rtl.css +1 -1
- package/components/swiper/swiper.css +1 -1
- package/components/swiper/swiper.js +2 -2
- package/components/swiper/swiper.lazy.js +1 -0
- package/components/tabs/tabs.js +16 -9
- package/components/tabs/tabs.lazy.js +1 -0
- package/components/text-editor/text-editor-class.js +5 -5
- package/components/text-editor/text-editor-rtl.css +1 -1
- package/components/text-editor/text-editor.css +1 -1
- package/components/text-editor/text-editor.js +4 -4
- package/components/text-editor/{text-editor.umd.js → text-editor.lazy.js} +1 -1
- package/components/timeline/timeline-rtl.css +1 -1
- package/components/timeline/timeline.css +1 -1
- package/components/timeline/{timeline.umd.js → timeline.lazy.js} +0 -0
- package/components/toast/toast-class.js +4 -4
- package/components/toast/toast.d.ts +2 -2
- package/components/toast/toast.js +3 -3
- package/components/toast/{toast.umd.js → toast.lazy.js} +0 -0
- package/components/toggle/toggle-class.js +9 -5
- package/components/toggle/toggle-rtl.css +1 -1
- package/components/toggle/toggle.css +1 -1
- package/components/toggle/toggle.js +3 -3
- package/components/toggle/toggle.lazy.js +1 -0
- package/components/toolbar/toolbar-aurora.less +0 -13
- package/components/toolbar/toolbar-md.less +0 -13
- package/components/toolbar/toolbar.js +13 -5
- package/components/toolbar/toolbar.less +13 -0
- package/components/tooltip/tooltip-class.js +9 -5
- package/components/tooltip/tooltip.js +3 -3
- package/components/tooltip/tooltip.lazy.js +1 -0
- package/components/touch-ripple/touch-ripple-class.js +1 -1
- package/components/touch-ripple/touch-ripple-vars.less +1 -1
- package/components/touch-ripple/touch-ripple.js +6 -2
- package/components/treeview/treeview-rtl.css +1 -1
- package/components/treeview/treeview.css +1 -1
- package/components/treeview/treeview.js +2 -2
- package/components/treeview/{treeview.umd.js → treeview.lazy.js} +1 -1
- package/components/typography/{typography.umd.js → typography.lazy.js} +0 -0
- package/components/view/resizable-view.js +3 -3
- package/components/view/view-class.js +18 -7
- package/components/view/view.d.ts +5 -1
- package/components/view/view.js +5 -3
- package/components/virtual-list/virtual-list-class.js +58 -13
- package/components/virtual-list/virtual-list.d.ts +2 -2
- package/components/virtual-list/virtual-list.js +2 -2
- package/components/virtual-list/virtual-list.lazy.js +1 -0
- package/framework7-bundle-rtl.css +513 -411
- package/framework7-bundle-rtl.min.css +4 -4
- package/framework7-bundle.css +498 -395
- package/framework7-bundle.esm.js +87 -86
- package/framework7-bundle.js +2728 -1257
- package/framework7-bundle.js.map +1 -1
- package/framework7-bundle.less +4 -3
- package/framework7-bundle.min.css +4 -4
- package/framework7-bundle.min.js +4 -4
- package/framework7-bundle.min.js.map +1 -1
- package/framework7-lite-bundle.esm.js +81 -80
- package/framework7-lite.esm.js +27 -27
- package/framework7-rtl.css +61 -70
- package/framework7-rtl.min.css +4 -4
- package/framework7-types.d.ts +5 -1
- package/framework7.css +60 -68
- package/framework7.d.ts +4 -0
- package/framework7.esm.js +30 -30
- package/framework7.js +675 -255
- package/framework7.js.map +1 -1
- package/framework7.less +3 -3
- package/framework7.min.css +4 -4
- package/framework7.min.js +4 -4
- package/framework7.min.js.map +1 -1
- package/less/mixins.less +2 -2
- package/modules/clicks/clicks.js +2 -2
- package/modules/component/$h.js +6 -2
- package/modules/component/$jsx.js +6 -2
- package/modules/component/component-class.js +40 -27
- package/modules/component/component.d.ts +2 -2
- package/modules/component/component.js +11 -10
- package/modules/component/eventslisteners.js +6 -2
- package/modules/component/parse-component.js +2 -2
- package/modules/component/patch.js +5 -5
- package/modules/component/snabbdom/h.js +2 -2
- package/modules/component/snabbdom/snabbdom.bundle.js +7 -7
- package/modules/component/snabbdom/snabbdom.js +3 -3
- package/modules/component/snabbdom/thunk.js +1 -1
- package/modules/component/snabbdom/tovnode.js +2 -2
- package/modules/component/vdom.js +35 -20
- package/modules/device/device.js +2 -2
- package/modules/history/history.js +1 -1
- package/modules/request/request.js +1 -1
- package/modules/resize/resize.js +1 -1
- package/modules/router/back.js +24 -14
- package/modules/router/clear-previous-history.js +2 -2
- package/modules/router/component-loader.js +81 -24
- package/modules/router/modal.js +8 -4
- package/modules/router/navigate.js +25 -55
- package/modules/router/redirect.js +6 -2
- package/modules/router/router-class.js +50 -21
- package/modules/router/router.js +1 -1
- package/modules/router/swipe-back.js +12 -11
- package/modules/router/tab.js +10 -6
- package/modules/service-worker/service-worker.js +1 -1
- package/modules/store/create-store.js +11 -3
- package/modules/store/store.js +1 -1
- package/modules/support/support.js +1 -1
- package/modules/touch/touch.js +4 -4
- package/modules/utils/utils.js +1 -1
- package/package.json +12 -6
- package/shared/$jsx.js +6 -1
- package/shared/class.js +35 -7
- package/shared/constructor-methods.js +26 -5
- package/shared/events-class.js +15 -3
- package/shared/get-device.d.ts +0 -2
- package/shared/get-device.js +11 -7
- package/shared/history.js +2 -2
- package/shared/modal-methods.js +13 -5
- package/shared/request.js +46 -8
- package/shared/utils.js +47 -10
- package/components/actions/actions.umd.js +0 -1
- package/components/area-chart/area-chart.umd.js +0 -1
- package/components/autocomplete/autocomplete.umd.js +0 -1
- package/components/calendar/calendar.umd.js +0 -1
- package/components/card/card.umd.js +0 -1
- package/components/data-table/data-table.umd.js +0 -1
- package/components/dialog/dialog.umd.js +0 -1
- package/components/fab/fab.umd.js +0 -1
- package/components/gauge/gauge.umd.js +0 -1
- package/components/input/input.umd.js +0 -1
- package/components/list-index/list-index.umd.js +0 -1
- package/components/login-screen/login-screen.umd.js +0 -1
- package/components/menu/menu.umd.js +0 -1
- package/components/messagebar/messagebar.umd.js +0 -1
- package/components/messages/messages.umd.js +0 -1
- package/components/panel/panel.umd.js +0 -1
- package/components/photo-browser/photo-browser.umd.js +0 -1
- package/components/picker/picker.umd.js +0 -1
- package/components/pie-chart/pie-chart.umd.js +0 -1
- package/components/popover/popover.umd.js +0 -1
- package/components/popup/popup.umd.js +0 -1
- package/components/preloader/preloader.umd.js +0 -1
- package/components/progressbar/progressbar.umd.js +0 -1
- package/components/pull-to-refresh/pull-to-refresh.umd.js +0 -1
- package/components/searchbar/searchbar.umd.js +0 -1
- package/components/sheet/sheet.umd.js +0 -1
- package/components/smart-select/smart-select.umd.js +0 -1
- package/components/sortable/sortable.umd.js +0 -1
- package/components/swiper/swiper.umd.js +0 -1
- package/components/tabs/tabs.umd.js +0 -1
- package/components/toggle/toggle.umd.js +0 -1
- package/components/tooltip/tooltip.umd.js +0 -1
- package/components/virtual-list/virtual-list.umd.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--f7-treeview-item-height:34px;--f7-treeview-item-padding-left:16px;--f7-treeview-item-padding-right:16px;--f7-treeview-toggle-size:24px;--f7-treeview-children-offset:29px;--f7-treeview-label-font-weight:400;--f7-treeview-label-text-color:inherit;--f7-treeview-icon-size:24px;--f7-treeview-toggle-color:rgba(0, 0, 0, 0.5);--f7-treeview-toggle-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-toggle-pressed-bg-color:rgba(0, 0, 0, 0.15);--f7-treeview-icon-color:rgba(0, 0, 0, 0.5);--f7-treeview-selectable-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-pressed-bg-color:rgba(0, 0, 0, 0.15)}:root .
|
|
1
|
+
:root{--f7-treeview-item-height:34px;--f7-treeview-item-padding-left:16px;--f7-treeview-item-padding-right:16px;--f7-treeview-toggle-size:24px;--f7-treeview-children-offset:29px;--f7-treeview-label-font-weight:400;--f7-treeview-label-text-color:inherit;--f7-treeview-icon-size:24px;--f7-treeview-toggle-color:rgba(0, 0, 0, 0.5);--f7-treeview-toggle-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-toggle-pressed-bg-color:rgba(0, 0, 0, 0.15);--f7-treeview-icon-color:rgba(0, 0, 0, 0.5);--f7-treeview-selectable-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-pressed-bg-color:rgba(0, 0, 0, 0.15)}:root .dark,:root.dark{--f7-treeview-toggle-color:rgba(255, 255, 255, 0.5);--f7-treeview-toggle-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-toggle-pressed-bg-color:rgba(255, 255, 255, 0.1);--f7-treeview-icon-color:rgba(255, 255, 255, 0.75);--f7-treeview-selectable-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-link-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-link-pressed-bg-color:rgba(255, 255, 255, 0.11)}.ios{--f7-treeview-label-font-size:17px}.md{--f7-treeview-label-font-size:16px}.aurora{--f7-treeview-label-font-size:16px}.treeview-item-root{padding-right:var(--f7-treeview-item-padding-left);padding-left:var(--f7-treeview-item-padding-right);min-height:var(--f7-treeview-item-height);display:flex;align-items:center;justify-content:flex-start}.treeview-item-content{display:flex;justify-content:flex-start;align-items:center}.treeview-item-content>.f7-icons,.treeview-item-content>.material-icons,.treeview-item-content>i{font-size:var(--f7-treeview-icon-size);color:var(--f7-treeview-icon-color)}.treeview-item-content:first-child{margin-right:calc(var(--f7-treeview-toggle-size) + 5px)}.treeview-item-content>*+*{margin-right:5px}.treeview-item-label{font-size:var(--f7-treeview-label-font-size);font-weight:var(--f7-treeview-label-font-weight);color:var(--f7-treeview-label-text-color)}.treeview-toggle{width:var(--f7-treeview-toggle-size);height:var(--f7-treeview-toggle-size);cursor:pointer;border-radius:4px;background-color:rgba(0,0,0,0);transition-duration:.2s;position:relative;margin-left:5px}.treeview-toggle.active-state{background-color:var(--f7-treeview-toggle-pressed-bg-color)}.treeview-toggle:after{transition-duration:.2s;content:'';position:absolute;left:50%;top:50%;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:translate(-50%,-50%);border-right:6px solid var(--f7-treeview-toggle-color)}.treeview-toggle-hidden{opacity:0;pointer-events:none;visibility:hidden}.treeview-preloader{--f7-preloader-size:var(--f7-treeview-toggle-size);margin-left:calc(-1 * var(--f7-treeview-toggle-size))}.treeview-item-children{display:none}.treeview-item-opened>.treeview-item-children{display:block}.treeview-item-opened>.treeview-item-root .treeview-toggle:after{transform:translate(-50%,-50%) rotate(-90deg)}a.treeview-item-root{color:var(--f7-treeview-label-text-color)}.treeview-item-selectable.treeview-item-root,.treeview-item-selectable>.treeview-item-root{cursor:pointer;transition-duration:150ms}a.treeview-item-root{transition-duration:150ms}a.treeview-item-root.active-state{background:var(--f7-treeview-link-pressed-bg-color)}.treeview-item-toggle.treeview-item-root,.treeview-item-toggle>.treeview-item-root{cursor:pointer}.treeview-item-selected.treeview-item-root,.treeview-item-selected>.treeview-item-root{background:var(--f7-treeview-selectable-selected-bg-color,rgba(var(--f7-theme-color-rgb),.2))}.treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 1)}.treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 2)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 3)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 4)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 5)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 6)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 7)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 8)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 9)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 10)}.aurora .treeview-toggle:hover{background-color:var(--f7-treeview-toggle-hover-bg-color)}.aurora .treeview-toggle.active-state{background-color:var(--f7-treeview-toggle-pressed-bg-color)}.aurora .treeview-item-selectable.treeview-item-root:hover,.aurora .treeview-item-selectable>.treeview-item-root:hover{background:var(--f7-treeview-selectable-hover-bg-color)}.aurora a.treeview-item-root:hover{background:var(--f7-treeview-link-hover-bg-color)}.aurora a.treeview-item-root.active-state{background:var(--f7-treeview-link-pressed-bg-color)}.aurora .treeview-item-selected.treeview-item-root:hover,.aurora .treeview-item-selected>.treeview-item-root:hover{background:var(--f7-treeview-selectable-selected-bg-color,rgba(var(--f7-theme-color-rgb),.2))}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--f7-treeview-item-height:34px;--f7-treeview-item-padding-left:16px;--f7-treeview-item-padding-right:16px;--f7-treeview-toggle-size:24px;--f7-treeview-children-offset:29px;--f7-treeview-label-font-weight:400;--f7-treeview-label-text-color:inherit;--f7-treeview-icon-size:24px;--f7-treeview-toggle-color:rgba(0, 0, 0, 0.5);--f7-treeview-toggle-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-toggle-pressed-bg-color:rgba(0, 0, 0, 0.15);--f7-treeview-icon-color:rgba(0, 0, 0, 0.5);--f7-treeview-selectable-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-pressed-bg-color:rgba(0, 0, 0, 0.15)}:root .
|
|
1
|
+
:root{--f7-treeview-item-height:34px;--f7-treeview-item-padding-left:16px;--f7-treeview-item-padding-right:16px;--f7-treeview-toggle-size:24px;--f7-treeview-children-offset:29px;--f7-treeview-label-font-weight:400;--f7-treeview-label-text-color:inherit;--f7-treeview-icon-size:24px;--f7-treeview-toggle-color:rgba(0, 0, 0, 0.5);--f7-treeview-toggle-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-toggle-pressed-bg-color:rgba(0, 0, 0, 0.15);--f7-treeview-icon-color:rgba(0, 0, 0, 0.5);--f7-treeview-selectable-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-pressed-bg-color:rgba(0, 0, 0, 0.15)}:root .dark,:root.dark{--f7-treeview-toggle-color:rgba(255, 255, 255, 0.5);--f7-treeview-toggle-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-toggle-pressed-bg-color:rgba(255, 255, 255, 0.1);--f7-treeview-icon-color:rgba(255, 255, 255, 0.75);--f7-treeview-selectable-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-link-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-link-pressed-bg-color:rgba(255, 255, 255, 0.11)}.ios{--f7-treeview-label-font-size:17px}.md{--f7-treeview-label-font-size:16px}.aurora{--f7-treeview-label-font-size:16px}.treeview-item-root{padding-left:var(--f7-treeview-item-padding-left);padding-right:var(--f7-treeview-item-padding-right);min-height:var(--f7-treeview-item-height);display:flex;align-items:center;justify-content:flex-start}.treeview-item-content{display:flex;justify-content:flex-start;align-items:center}.treeview-item-content>.f7-icons,.treeview-item-content>.material-icons,.treeview-item-content>i{font-size:var(--f7-treeview-icon-size);color:var(--f7-treeview-icon-color)}.treeview-item-content:first-child{margin-left:calc(var(--f7-treeview-toggle-size) + 5px)}.treeview-item-content>*+*{margin-left:5px}.treeview-item-label{font-size:var(--f7-treeview-label-font-size);font-weight:var(--f7-treeview-label-font-weight);color:var(--f7-treeview-label-text-color)}.treeview-toggle{width:var(--f7-treeview-toggle-size);height:var(--f7-treeview-toggle-size);cursor:pointer;border-radius:4px;background-color:rgba(0,0,0,0);transition-duration:.2s;position:relative;margin-right:5px}.treeview-toggle.active-state{background-color:var(--f7-treeview-toggle-pressed-bg-color)}.treeview-toggle:after{transition-duration:.2s;content:'';position:absolute;left:50%;top:50%;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:translate(-50%,-50%);border-left:6px solid var(--f7-treeview-toggle-color)}.treeview-toggle-hidden{opacity:0;pointer-events:none;visibility:hidden}.treeview-preloader{--f7-preloader-size:var(--f7-treeview-toggle-size);margin-right:calc(-1 * var(--f7-treeview-toggle-size))}.treeview-item-children{display:none}.treeview-item-opened>.treeview-item-children{display:block}.treeview-item-opened>.treeview-item-root .treeview-toggle:after{transform:translate(-50%,-50%) rotate(90deg)}a.treeview-item-root{color:var(--f7-treeview-label-text-color)}.treeview-item-selectable.treeview-item-root,.treeview-item-selectable>.treeview-item-root{cursor:pointer;transition-duration:150ms}a.treeview-item-root{transition-duration:150ms}a.treeview-item-root.active-state{background:var(--f7-treeview-link-pressed-bg-color)}.treeview-item-toggle.treeview-item-root,.treeview-item-toggle>.treeview-item-root{cursor:pointer}.treeview-item-selected.treeview-item-root,.treeview-item-selected>.treeview-item-root{background:var(--f7-treeview-selectable-selected-bg-color,rgba(var(--f7-theme-color-rgb),.2))}.treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 1)}.treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 2)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 3)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 4)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 5)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 6)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 7)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 8)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 9)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 10)}.aurora .treeview-toggle:hover{background-color:var(--f7-treeview-toggle-hover-bg-color)}.aurora .treeview-toggle.active-state{background-color:var(--f7-treeview-toggle-pressed-bg-color)}.aurora .treeview-item-selectable.treeview-item-root:hover,.aurora .treeview-item-selectable>.treeview-item-root:hover{background:var(--f7-treeview-selectable-hover-bg-color)}.aurora a.treeview-item-root:hover{background:var(--f7-treeview-link-hover-bg-color)}.aurora a.treeview-item-root.active-state{background:var(--f7-treeview-link-pressed-bg-color)}.aurora .treeview-item-selected.treeview-item-root:hover,.aurora .treeview-item-selected>.treeview-item-root:hover{background:var(--f7-treeview-selectable-selected-bg-color,rgba(var(--f7-theme-color-rgb),.2))}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import $ from '../../shared/dom7';
|
|
2
|
-
import { bindMethods, iosPreloaderContent, mdPreloaderContent, auroraPreloaderContent } from '../../shared/utils';
|
|
1
|
+
import $ from '../../shared/dom7.js';
|
|
2
|
+
import { bindMethods, iosPreloaderContent, mdPreloaderContent, auroraPreloaderContent } from '../../shared/utils.js';
|
|
3
3
|
const Treeview = {
|
|
4
4
|
open(itemEl) {
|
|
5
5
|
const app = this;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var r=e.$,o=e.utils,i=(e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,o.
|
|
1
|
+
(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var r=e.$,o=e.utils,i=(e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,o.iosPreloaderContent),n=o.mdPreloaderContent,s=o.auroraPreloaderContent,l=o.bindMethods;const d={open(e){const t=this,o=r(e).eq(0);if(o.length&&(o.addClass("treeview-item-opened"),o.trigger("treeview:open"),t.emit("treeviewOpen",o[0]),o.hasClass("treeview-load-children")&&!o[0].f7TreeviewChildrenLoaded)){const e={iosPreloaderContent:i,mdPreloaderContent:n,auroraPreloaderContent:s};o.trigger("treeview:loadchildren",l),t.emit("treeviewLoadChildren",o[0],l),o.find(".treeview-toggle").addClass("treeview-toggle-hidden"),o.find(".treeview-item-root").prepend(`<div class="preloader treeview-preloader">${e[`${t.theme}PreloaderContent`]}</div>`)}function l(e){e?(o.removeClass("treeview-item-opened"),o.trigger("treeview:close"),t.emit("treeviewClose",o[0])):o[0].f7TreeviewChildrenLoaded=!0,o.find(".treeview-toggle").removeClass("treeview-toggle-hidden"),o.find(".treeview-preloader").remove()}},close(e){const t=r(e).eq(0);t.length&&(t.removeClass("treeview-item-opened"),t.trigger("treeview:close"),this.emit("treeviewClose",t[0]))},toggle(e){const t=r(e).eq(0);if(!t.length)return;const o=t.hasClass("treeview-item-opened");this.treeview[o?"close":"open"](t)}};var a={name:"treeview",create(){l(this,{treeview:d})},clicks:{".treeview-toggle":function(e,t,r){if(e.parents(".treeview-item-toggle").length)return;const o=e.parents(".treeview-item").eq(0);o.length&&(r.preventF7Router=!0,this.treeview.toggle(o[0]))},".treeview-item-toggle":function(e,t,r){const o=e.closest(".treeview-item").eq(0);o.length&&(r.preventF7Router=!0,this.treeview.toggle(o[0]))}}};if(t){if(e.prototype.modules&&e.prototype.modules[a.name])return;e.use(a),e.instance&&(e.instance.useModuleParams(a,e.instance.params),e.instance.useModule(a))}return a}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
|
|
File without changes
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import $ from '../../shared/dom7';
|
|
2
|
-
import { extend } from '../../shared/utils';
|
|
3
|
-
import { getSupport } from '../../shared/get-support';
|
|
1
|
+
import $ from '../../shared/dom7.js';
|
|
2
|
+
import { extend } from '../../shared/utils.js';
|
|
3
|
+
import { getSupport } from '../../shared/get-support.js';
|
|
4
4
|
|
|
5
5
|
function resizableView(view) {
|
|
6
6
|
const app = view.app;
|
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
import $ from '../../shared/dom7';
|
|
2
|
-
import { extend } from '../../shared/utils';
|
|
3
|
-
import Router from '../../modules/router/router';
|
|
4
|
-
import Framework7Class from '../../shared/class';
|
|
5
|
-
import resizableView from './resizable-view';
|
|
1
|
+
import $ from '../../shared/dom7.js';
|
|
2
|
+
import { extend } from '../../shared/utils.js';
|
|
3
|
+
import Router from '../../modules/router/router.js';
|
|
4
|
+
import Framework7Class from '../../shared/class.js';
|
|
5
|
+
import resizableView from './resizable-view.js';
|
|
6
6
|
|
|
7
7
|
class View extends Framework7Class {
|
|
8
|
-
constructor(app, el, viewParams
|
|
8
|
+
constructor(app, el, viewParams) {
|
|
9
|
+
if (viewParams === void 0) {
|
|
10
|
+
viewParams = {};
|
|
11
|
+
}
|
|
12
|
+
|
|
9
13
|
super(viewParams, [app]);
|
|
10
14
|
const view = this;
|
|
11
15
|
const ssr = view.params.routerId;
|
|
@@ -207,7 +211,14 @@ class View extends Framework7Class {
|
|
|
207
211
|
view.initMasterDetail();
|
|
208
212
|
}
|
|
209
213
|
|
|
210
|
-
view.
|
|
214
|
+
if (view.params.initRouterOnTabShow && view.$el.hasClass('tab') && !view.$el.hasClass('tab-active')) {
|
|
215
|
+
view.$el.once('tab:show', () => {
|
|
216
|
+
view.router.init();
|
|
217
|
+
});
|
|
218
|
+
} else {
|
|
219
|
+
view.router.init();
|
|
220
|
+
}
|
|
221
|
+
|
|
211
222
|
view.$el.trigger('view:init');
|
|
212
223
|
view.emit('local::init viewInit', view);
|
|
213
224
|
}
|
|
@@ -26,6 +26,8 @@ export namespace View {
|
|
|
26
26
|
destroy(): void;
|
|
27
27
|
}
|
|
28
28
|
interface Parameters {
|
|
29
|
+
/** If enabled and View is tab, it won't initialize router and load initial page until View tab becomes visible */
|
|
30
|
+
initRouterOnTabShow?: boolean;
|
|
29
31
|
/** View name. If view was created with name, then it may be accessed via app.views.[name] */
|
|
30
32
|
name?: string;
|
|
31
33
|
/** Specify whether this is View is main or not. If not passed then will be determined based on whether its element has view-main class or not */
|
|
@@ -142,7 +144,7 @@ export namespace View {
|
|
|
142
144
|
auroraSwipeBackAnimateShadow?: boolean;
|
|
143
145
|
/** Enable/disable opacity animation during swipe back action. You can disable it to improve performance. For Aurora theme */
|
|
144
146
|
auroraSwipeBackAnimateOpacity?: boolean;
|
|
145
|
-
/** If you develop web app (not
|
|
147
|
+
/** If you develop web app (not Cordova/Capacitor or Home Screen web app) it is useful to enable hash navigation (browser url will look like "http://my-webapp.com/#!/about.html"). User as well will be able to navigate through app's history by using browser's default back and forward buttons. */
|
|
146
148
|
browserHistory?: boolean;
|
|
147
149
|
/** Browser history root URL, for example "http://my-app.com/". It is useful only in case when you use empty ("") browserHistorySeparator */
|
|
148
150
|
browserHistoryRoot?: string;
|
|
@@ -158,6 +160,8 @@ export namespace View {
|
|
|
158
160
|
browserHistoryInitialMatch?: boolean;
|
|
159
161
|
/** When enabled (by default), it will store router history in localStorage and try to restore it on next web app visit */
|
|
160
162
|
browserHistoryStoreHistory?: boolean;
|
|
163
|
+
/** When "replace" (by default), it will replace state on routable tabs change, otherwise (if "push"), it will add to history every routable tab change, so it will be possible to switch back between tabs with browser back button */
|
|
164
|
+
browserHistoryTabs?: 'replace' | 'push';
|
|
161
165
|
/** Object with events handlers.. */
|
|
162
166
|
on?: {
|
|
163
167
|
[event in keyof Events]?: Events[event];
|
package/components/view/view.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import $ from '../../shared/dom7';
|
|
2
|
-
import { extend } from '../../shared/utils';
|
|
3
|
-
import View from './view-class';
|
|
1
|
+
import $ from '../../shared/dom7.js';
|
|
2
|
+
import { extend } from '../../shared/utils.js';
|
|
3
|
+
import View from './view-class.js';
|
|
4
4
|
|
|
5
5
|
function getCurrentView(app) {
|
|
6
6
|
const $popoverView = $('.popover.modal-in .view');
|
|
@@ -48,6 +48,7 @@ export default {
|
|
|
48
48
|
params: {
|
|
49
49
|
view: {
|
|
50
50
|
init: true,
|
|
51
|
+
initRouterOnTabShow: false,
|
|
51
52
|
name: undefined,
|
|
52
53
|
main: false,
|
|
53
54
|
router: true,
|
|
@@ -98,6 +99,7 @@ export default {
|
|
|
98
99
|
browserHistoryOnLoad: true,
|
|
99
100
|
browserHistoryInitialMatch: false,
|
|
100
101
|
browserHistoryStoreHistory: true,
|
|
102
|
+
browserHistoryTabs: 'replace',
|
|
101
103
|
// Animate Pages
|
|
102
104
|
animate: true,
|
|
103
105
|
// iOS Dynamic Navbar
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import { getDocument } from 'ssr-window';
|
|
2
|
-
import $ from '../../shared/dom7';
|
|
3
|
-
import { extend, deleteProps } from '../../shared/utils';
|
|
4
|
-
import Framework7Class from '../../shared/class';
|
|
5
|
-
import { getDevice } from '../../shared/get-device';
|
|
2
|
+
import $ from '../../shared/dom7.js';
|
|
3
|
+
import { extend, deleteProps } from '../../shared/utils.js';
|
|
4
|
+
import Framework7Class from '../../shared/class.js';
|
|
5
|
+
import { getDevice } from '../../shared/get-device.js';
|
|
6
6
|
|
|
7
7
|
class VirtualList extends Framework7Class {
|
|
8
|
-
constructor(app, params
|
|
8
|
+
constructor(app, params) {
|
|
9
|
+
if (params === void 0) {
|
|
10
|
+
params = {};
|
|
11
|
+
}
|
|
12
|
+
|
|
9
13
|
super(params, [app]);
|
|
10
14
|
const vl = this;
|
|
11
15
|
const device = getDevice();
|
|
@@ -122,7 +126,8 @@ class VirtualList extends Framework7Class {
|
|
|
122
126
|
rowsToRender: undefined,
|
|
123
127
|
maxBufferHeight: 0,
|
|
124
128
|
listHeight: undefined,
|
|
125
|
-
dynamicHeight: typeof vl.params.height === 'function'
|
|
129
|
+
dynamicHeight: typeof vl.params.height === 'function',
|
|
130
|
+
autoHeight: vl.params.height === 'auto'
|
|
126
131
|
}); // Install Modules
|
|
127
132
|
|
|
128
133
|
vl.useModules(); // Attach events
|
|
@@ -163,10 +168,13 @@ class VirtualList extends Framework7Class {
|
|
|
163
168
|
return vl;
|
|
164
169
|
}
|
|
165
170
|
|
|
166
|
-
setListSize() {
|
|
171
|
+
setListSize(autoHeightRerender) {
|
|
167
172
|
const vl = this;
|
|
168
173
|
const items = vl.filteredItems || vl.items;
|
|
169
|
-
|
|
174
|
+
|
|
175
|
+
if (!autoHeightRerender) {
|
|
176
|
+
vl.pageHeight = vl.$scrollableParentEl[0].offsetHeight;
|
|
177
|
+
}
|
|
170
178
|
|
|
171
179
|
if (vl.dynamicHeight) {
|
|
172
180
|
vl.listHeight = 0;
|
|
@@ -177,6 +185,31 @@ class VirtualList extends Framework7Class {
|
|
|
177
185
|
vl.listHeight += itemHeight;
|
|
178
186
|
vl.heights.push(itemHeight);
|
|
179
187
|
}
|
|
188
|
+
} else if (vl.autoHeight) {
|
|
189
|
+
vl.listHeight = 0;
|
|
190
|
+
if (!vl.heights) vl.heights = [];
|
|
191
|
+
if (!vl.heightsCalculated) vl.heightsCalculated = [];
|
|
192
|
+
const renderedItems = {};
|
|
193
|
+
vl.$itemsWrapEl.find(`[data-virtual-list-index]`).forEach(el => {
|
|
194
|
+
renderedItems[parseInt(el.getAttribute('data-virtual-list-index'), 10)] = el;
|
|
195
|
+
});
|
|
196
|
+
|
|
197
|
+
for (let i = 0; i < items.length; i += 1) {
|
|
198
|
+
const renderedItem = renderedItems[i];
|
|
199
|
+
|
|
200
|
+
if (renderedItem) {
|
|
201
|
+
if (!vl.heightsCalculated.includes(i)) {
|
|
202
|
+
vl.heights[i] = renderedItem.offsetHeight;
|
|
203
|
+
vl.heightsCalculated.push(i);
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
if (typeof vl.heights[i] === 'undefined') {
|
|
208
|
+
vl.heights[i] = 40;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
vl.listHeight += vl.heights[i];
|
|
212
|
+
}
|
|
180
213
|
} else {
|
|
181
214
|
vl.listHeight = Math.ceil(items.length / vl.params.cols) * vl.params.height;
|
|
182
215
|
vl.rowsPerScreen = Math.ceil(vl.pageHeight / vl.params.height);
|
|
@@ -211,7 +244,7 @@ class VirtualList extends Framework7Class {
|
|
|
211
244
|
let heightBeforeFirstItem = 0;
|
|
212
245
|
let heightBeforeLastItem = 0;
|
|
213
246
|
|
|
214
|
-
if (vl.dynamicHeight) {
|
|
247
|
+
if (vl.dynamicHeight || vl.autoHeight) {
|
|
215
248
|
let itemTop = 0;
|
|
216
249
|
let itemHeight;
|
|
217
250
|
vl.maxBufferHeight = vl.pageHeight;
|
|
@@ -278,7 +311,7 @@ class VirtualList extends Framework7Class {
|
|
|
278
311
|
|
|
279
312
|
|
|
280
313
|
if (i === fromIndex) {
|
|
281
|
-
if (vl.dynamicHeight) {
|
|
314
|
+
if (vl.dynamicHeight || vl.autoHeight) {
|
|
282
315
|
topPosition = heightBeforeFirstItem;
|
|
283
316
|
} else {
|
|
284
317
|
topPosition = i * vl.params.height / vl.params.cols;
|
|
@@ -296,7 +329,7 @@ class VirtualList extends Framework7Class {
|
|
|
296
329
|
|
|
297
330
|
|
|
298
331
|
if (!vl.updatableScroll) {
|
|
299
|
-
if (vl.dynamicHeight) {
|
|
332
|
+
if (vl.dynamicHeight || vl.autoHeight) {
|
|
300
333
|
vl.itemsWrapEl.style.height = `${heightBeforeLastItem}px`;
|
|
301
334
|
} else {
|
|
302
335
|
vl.itemsWrapEl.style.height = `${i * vl.params.height / vl.params.cols}px`;
|
|
@@ -336,10 +369,20 @@ class VirtualList extends Framework7Class {
|
|
|
336
369
|
items: renderExternalItems
|
|
337
370
|
});
|
|
338
371
|
}
|
|
372
|
+
|
|
373
|
+
if (vl.autoHeight) {
|
|
374
|
+
requestAnimationFrame(() => {
|
|
375
|
+
vl.setListSize(true);
|
|
376
|
+
});
|
|
377
|
+
}
|
|
339
378
|
} // Filter
|
|
340
379
|
|
|
341
380
|
|
|
342
|
-
filterItems(indexes, resetScrollTop
|
|
381
|
+
filterItems(indexes, resetScrollTop) {
|
|
382
|
+
if (resetScrollTop === void 0) {
|
|
383
|
+
resetScrollTop = true;
|
|
384
|
+
}
|
|
385
|
+
|
|
343
386
|
const vl = this;
|
|
344
387
|
vl.filteredItems = [];
|
|
345
388
|
|
|
@@ -372,7 +415,7 @@ class VirtualList extends Framework7Class {
|
|
|
372
415
|
if (index > vl.items.length) return false;
|
|
373
416
|
let itemTop = 0;
|
|
374
417
|
|
|
375
|
-
if (vl.dynamicHeight) {
|
|
418
|
+
if (vl.dynamicHeight || vl.autoHeight) {
|
|
376
419
|
for (let i = 0; i < index; i += 1) {
|
|
377
420
|
itemTop += vl.heights[i];
|
|
378
421
|
}
|
|
@@ -400,6 +443,7 @@ class VirtualList extends Framework7Class {
|
|
|
400
443
|
const vl = this;
|
|
401
444
|
|
|
402
445
|
if (vl.isVisible()) {
|
|
446
|
+
vl.heightsCalculated = [];
|
|
403
447
|
vl.setListSize();
|
|
404
448
|
vl.render(true);
|
|
405
449
|
}
|
|
@@ -600,6 +644,7 @@ class VirtualList extends Framework7Class {
|
|
|
600
644
|
vl.domCache = {};
|
|
601
645
|
}
|
|
602
646
|
|
|
647
|
+
vl.heightsCalculated = [];
|
|
603
648
|
vl.setListSize();
|
|
604
649
|
vl.render(true);
|
|
605
650
|
}
|
|
@@ -80,8 +80,8 @@ export namespace VirtualList {
|
|
|
80
80
|
rowsAfter?: number;
|
|
81
81
|
/** Number of items per row. Doesn't compatible when using Virtual List with dynamic height (default 1) */
|
|
82
82
|
cols?: number;
|
|
83
|
-
/** If number - list item height in px. If function then function should return item height. By default equals to 44 for iOS theme, 48 for MD theme, and 38 for Aurora theme */
|
|
84
|
-
height?: number | Function;
|
|
83
|
+
/** If number - list item height in px. If function then function should return item height. If "auto" - will automatically calculate each items heights. By default equals to 44 for iOS theme, 48 for MD theme, and 38 for Aurora theme */
|
|
84
|
+
height?: number | Function | string;
|
|
85
85
|
/** This optional function allows to use custom function to render item HTML. It could be used instead of template parameter */
|
|
86
86
|
renderItem?(item: any): string;
|
|
87
87
|
/** This optional function allows to render DOM items using some custom method. Useful in case it is used (e.g.) with Vue/React plugin to pass DOM rendering and manipulation to Vue/React. renderParameters conaints object with the following properties: fromIndex, toIndex, listHeight, topPosition, items */
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import VirtualList from './virtual-list-class';
|
|
2
|
-
import ConstructorMethods from '../../shared/constructor-methods';
|
|
1
|
+
import VirtualList from './virtual-list-class.js';
|
|
2
|
+
import ConstructorMethods from '../../shared/constructor-methods.js';
|
|
3
3
|
export default {
|
|
4
4
|
name: 'virtualList',
|
|
5
5
|
static: {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var s=e.$,a=e.utils,l=e.getDevice,r=(e.getSupport,e.Class),i=(e.Modal,e.ConstructorMethods),n=(e.ModalMethods,a.extend),o=a.deleteProps;class h extends r{constructor(e,t){void 0===t&&(t={}),super(t,[e]);const a=this,r=l(),i=getDocument();let o;"md"===e.theme?o=48:"ios"===e.theme?o=44:"aurora"===e.theme&&(o=38);const h={cols:1,height:o,cache:!0,dynamicHeightBufferSize:1,showFilteredItemsOnly:!1,renderExternal:void 0,setListHeight:!0,searchByItem:void 0,searchAll:void 0,ul:null,createUl:!0,scrollableParentEl:void 0,renderItem:e=>`\n <li>\n <div class="item-content">\n <div class="item-inner">\n <div class="item-title">${e}</div>\n </div>\n </div>\n </li>\n `.trim(),on:{}};if(a.useModulesParams(h),a.params=n(h,t),void 0!==a.params.height&&a.params.height||(a.params.height=o),a.$el=s(t.el),a.el=a.$el[0],0===a.$el.length)return;a.$el[0].f7VirtualList=a,a.items=a.params.items,a.params.showFilteredItemsOnly&&(a.filteredItems=[]),a.params.renderItem&&(a.renderItem=a.params.renderItem),a.$pageContentEl=a.$el.parents(".page-content"),a.pageContentEl=a.$pageContentEl[0],a.$scrollableParentEl=a.params.scrollableParentEl?s(a.params.scrollableParentEl).eq(0):a.$pageContentEl,!a.$scrollableParentEl.length&&a.$pageContentEl.length&&(a.$scrollableParentEl=a.$pageContentEl),a.scrollableParentEl=a.$scrollableParentEl[0],void 0!==a.params.updatableScroll?a.updatableScroll=a.params.updatableScroll:(a.updatableScroll=!0,r.ios&&r.osVersion.split(".")[0]<8&&(a.updatableScroll=!1));const m=a.params.ul;let c;a.$ul=m?s(a.params.ul):a.$el.children("ul"),0===a.$ul.length&&a.params.createUl&&(a.$el.append("<ul></ul>"),a.$ul=a.$el.children("ul")),a.ul=a.$ul[0],c=a.ul||a.params.createUl?a.$ul:a.$el,n(a,{$itemsWrapEl:c,itemsWrapEl:c[0],domCache:{},displayDomCache:{},tempDomElement:i.createElement("ul"),lastRepaintY:null,fragment:i.createDocumentFragment(),pageHeight:void 0,rowsPerScreen:void 0,rowsBefore:void 0,rowsAfter:void 0,rowsToRender:void 0,maxBufferHeight:0,listHeight:void 0,dynamicHeight:"function"==typeof a.params.height,autoHeight:"auto"===a.params.height}),a.useModules();const p=a.handleScroll.bind(a),d=a.handleResize.bind(a);let g,f,u,I;return a.attachEvents=function(){g=a.$el.parents(".page").eq(0),f=a.$el.parents(".tab").filter((e=>0===s(e).parent(".tabs").parent(".tabs-animated-wrap, .tabs-swipeable-wrap").length)).eq(0),u=a.$el.parents(".panel").eq(0),I=a.$el.parents(".popup").eq(0),a.$scrollableParentEl.on("scroll",p),g.length&&g.on("page:reinit",d),f.length&&f.on("tab:show",d),u.length&&u.on("panel:open",d),I.length&&I.on("popup:open",d),e.on("resize",d)},a.detachEvents=function(){a.$scrollableParentEl.off("scroll",p),g.length&&g.off("page:reinit",d),f.length&&f.off("tab:show",d),u.length&&u.off("panel:open",d),I.length&&I.off("popup:open",d),e.off("resize",d)},a.init(),a}setListSize(e){const t=this,s=t.filteredItems||t.items;if(e||(t.pageHeight=t.$scrollableParentEl[0].offsetHeight),t.dynamicHeight){t.listHeight=0,t.heights=[];for(let e=0;e<s.length;e+=1){const a=t.params.height(s[e]);t.listHeight+=a,t.heights.push(a)}}else if(t.autoHeight){t.listHeight=0,t.heights||(t.heights=[]),t.heightsCalculated||(t.heightsCalculated=[]);const e={};t.$itemsWrapEl.find("[data-virtual-list-index]").forEach((t=>{e[parseInt(t.getAttribute("data-virtual-list-index"),10)]=t}));for(let a=0;a<s.length;a+=1){const s=e[a];s&&(t.heightsCalculated.includes(a)||(t.heights[a]=s.offsetHeight,t.heightsCalculated.push(a))),void 0===t.heights[a]&&(t.heights[a]=40),t.listHeight+=t.heights[a]}}else t.listHeight=Math.ceil(s.length/t.params.cols)*t.params.height,t.rowsPerScreen=Math.ceil(t.pageHeight/t.params.height),t.rowsBefore=t.params.rowsBefore||2*t.rowsPerScreen,t.rowsAfter=t.params.rowsAfter||t.rowsPerScreen,t.rowsToRender=t.rowsPerScreen+t.rowsBefore+t.rowsAfter,t.maxBufferHeight=t.rowsBefore/2*t.params.height;(t.updatableScroll||t.params.setListHeight)&&t.$itemsWrapEl.css({height:`${t.listHeight}px`})}render(e,t){const s=this;e&&(s.lastRepaintY=null);let a=-(s.$el[0].getBoundingClientRect().top-s.$scrollableParentEl[0].getBoundingClientRect().top);if(void 0!==t&&(a=t),!(null===s.lastRepaintY||Math.abs(a-s.lastRepaintY)>s.maxBufferHeight||!s.updatableScroll&&s.$scrollableParentEl[0].scrollTop+s.pageHeight>=s.$scrollableParentEl[0].scrollHeight))return;s.lastRepaintY=a;const l=s.filteredItems||s.items;let r,i,n,o=0,h=0;if(s.dynamicHeight||s.autoHeight){let e,t=0;s.maxBufferHeight=s.pageHeight;for(let l=0;l<s.heights.length;l+=1)e=s.heights[l],void 0===r&&(t+e>=a-2*s.pageHeight*s.params.dynamicHeightBufferSize?r=l:o+=e),void 0===i&&((t+e>=a+2*s.pageHeight*s.params.dynamicHeightBufferSize||l===s.heights.length-1)&&(i=l+1),h+=e),t+=e;i=Math.min(i,l.length)}else r=(parseInt(a/s.params.height,10)-s.rowsBefore)*s.params.cols,r<0&&(r=0),i=Math.min(r+s.rowsToRender*s.params.cols,l.length);const m=[];let c;for(s.reachEnd=!1,c=r;c<i;c+=1){let e;const t=s.items.indexOf(l[c]);c===r&&(s.currentFromIndex=t),c===i-1&&(s.currentToIndex=t),s.filteredItems?s.items[t]===s.filteredItems[s.filteredItems.length-1]&&(s.reachEnd=!0):t===s.items.length-1&&(s.reachEnd=!0),s.params.renderExternal?m.push(l[c]):s.domCache[t]?(e=s.domCache[t],e.f7VirtualListIndex=t):(s.renderItem?s.tempDomElement.innerHTML=s.renderItem(l[c],t).trim():s.tempDomElement.innerHTML=l[c].toString().trim(),e=s.tempDomElement.childNodes[0],s.params.cache&&(s.domCache[t]=e),e.f7VirtualListIndex=t),c===r&&(n=s.dynamicHeight||s.autoHeight?o:c*s.params.height/s.params.cols),s.params.renderExternal||(e.style.top=`${n}px`,s.emit("local::itemBeforeInsert vlItemBeforeInsert",s,e,l[c]),s.fragment.appendChild(e))}s.updatableScroll||(s.dynamicHeight||s.autoHeight?s.itemsWrapEl.style.height=`${h}px`:s.itemsWrapEl.style.height=c*s.params.height/s.params.cols+"px"),s.params.renderExternal?l&&0===l.length&&(s.reachEnd=!0):(s.emit("local::beforeClear vlBeforeClear",s,s.fragment),s.itemsWrapEl.innerHTML="",s.emit("local::itemsBeforeInsert vlItemsBeforeInsert",s,s.fragment),l&&0===l.length?(s.reachEnd=!0,s.params.emptyTemplate&&(s.itemsWrapEl.innerHTML=s.params.emptyTemplate)):s.itemsWrapEl.appendChild(s.fragment),s.emit("local::itemsAfterInsert vlItemsAfterInsert",s,s.fragment)),void 0!==t&&e&&s.$scrollableParentEl.scrollTop(t,0),s.params.renderExternal&&s.params.renderExternal(s,{fromIndex:r,toIndex:i,listHeight:s.listHeight,topPosition:n,items:m}),s.autoHeight&&requestAnimationFrame((()=>{s.setListSize(!0)}))}filterItems(e,t){void 0===t&&(t=!0);const s=this;s.filteredItems=[];for(let t=0;t<e.length;t+=1)s.filteredItems.push(s.items[e[t]]);t&&(s.$scrollableParentEl[0].scrollTop=0),s.update()}resetFilter(){const e=this;e.params.showFilteredItemsOnly?e.filteredItems=[]:(e.filteredItems=null,delete e.filteredItems),e.update()}scrollToItem(e){const t=this;if(e>t.items.length)return!1;let s=0;if(t.dynamicHeight||t.autoHeight)for(let a=0;a<e;a+=1)s+=t.heights[a];else s=e*t.params.height;const a=t.$el[0].offsetTop;return t.render(!0,a+s-parseInt(t.$scrollableParentEl.css("padding-top"),10)),!0}handleScroll(){this.render()}isVisible(){const e=this;return!!(e.el.offsetWidth||e.el.offsetHeight||e.el.getClientRects().length)}handleResize(){const e=this;e.isVisible()&&(e.heightsCalculated=[],e.setListSize(),e.render(!0))}appendItems(e){const t=this;for(let s=0;s<e.length;s+=1)t.items.push(e[s]);t.update()}appendItem(e){this.appendItems([e])}replaceAllItems(e){const t=this;t.items=e,delete t.filteredItems,t.domCache={},t.update()}replaceItem(e,t){const s=this;s.items[e]=t,s.params.cache&&delete s.domCache[e],s.update()}prependItems(e){const t=this;for(let s=e.length-1;s>=0;s-=1)t.items.unshift(e[s]);if(t.params.cache){const s={};Object.keys(t.domCache).forEach((a=>{s[parseInt(a,10)+e.length]=t.domCache[a]})),t.domCache=s}t.update()}prependItem(e){this.prependItems([e])}moveItem(e,t){const s=this,a=e;let l=t;if(a===l)return;const r=s.items.splice(a,1)[0];if(l>=s.items.length?(s.items.push(r),l=s.items.length-1):s.items.splice(l,0,r),s.params.cache){const e={};Object.keys(s.domCache).forEach((t=>{const r=parseInt(t,10),i=a<l?a:l,n=a<l?l:a,o=a<l?-1:1;(r<i||r>n)&&(e[r]=s.domCache[r]),r===i&&(e[n]=s.domCache[r]),r>i&&r<=n&&(e[r+o]=s.domCache[r])})),s.domCache=e}s.update()}insertItemBefore(e,t){const s=this;if(0!==e)if(e>=s.items.length)s.appendItem(t);else{if(s.items.splice(e,0,t),s.params.cache){const t={};Object.keys(s.domCache).forEach((a=>{const l=parseInt(a,10);l>=e&&(t[l+1]=s.domCache[l])})),s.domCache=t}s.update()}else s.prependItem(t)}deleteItems(e){const t=this;let s,a=0;for(let l=0;l<e.length;l+=1){let r=e[l];void 0!==s&&r>s&&(a=-l),r+=a,s=e[l];const i=t.items.splice(r,1)[0];if(t.filteredItems&&t.filteredItems.indexOf(i)>=0&&t.filteredItems.splice(t.filteredItems.indexOf(i),1),t.params.cache){const e={};Object.keys(t.domCache).forEach((s=>{const a=parseInt(s,10);a===r?delete t.domCache[r]:parseInt(s,10)>r?e[a-1]=t.domCache[s]:e[a]=t.domCache[s]})),t.domCache=e}}t.update()}deleteAllItems(){const e=this;e.items=[],delete e.filteredItems,e.params.cache&&(e.domCache={}),e.update()}deleteItem(e){this.deleteItems([e])}clearCache(){this.domCache={}}update(e){const t=this;e&&t.params.cache&&(t.domCache={}),t.heightsCalculated=[],t.setListSize(),t.render(!0)}init(){const e=this;e.attachEvents(),e.setListSize(),e.render()}destroy(){let e=this;e.detachEvents(),e.$el[0].f7VirtualList=null,delete e.$el[0].f7VirtualList,o(e),e=null}}var m={name:"virtualList",static:{VirtualList:h},create(){this.virtualList=i({defaultSelector:".virtual-list",constructor:h,app:this,domProp:"f7VirtualList"})}};if(t){if(e.prototype.modules&&e.prototype.modules[m.name])return;e.use(m),e.instance&&(e.instance.useModuleParams(m,e.instance.params),e.instance.useModule(m))}return m}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
|